Рекурсивная динамическая компоновка шаблонов в angular2

Я основал некоторые из моих работ над той же проблемой, описанной здесь:

динамический шаблон для компиляции динамического компонента с Angular 2.0

Как я могу использовать/создавать динамический шаблон для компиляции динамического компонента с Angular 2.0?

Рабочий плункер, описанный в вопросе выше, можно найти здесь.

Проблема возникает, если динамическая деталь пытается создать другое динамическое представление, которое использует динамическую деталь в шаблоне. Если я попытаюсь сделать это, я получаю следующее исключение.:

"dynamic-detail" не является известным элементом: 1. Если "dynamic-detail" является компонентом Angular, а затем убедитесь, что он является частью этого модуля.

Это легко воспроизвести, изменив логику в plunker для создания динамического шаблона, который выводит "<dynamic-detail></dynamic-detail>".

В файле " app/dynamic/template.builder.ts" я изменил следующий код:

      let editorName = useTextarea 
    ? "text-editor"
    : "string-editor";

To

      let editorName = useTextarea 
    ? "dynamic-detail"
    : "string-editor";

Когда это произойдет, я столкнулся с указанным выше исключением. По-видимому, компилятор не знаком с динамической детализацией, когда это делается рекурсивно.

Я попытался добавить DynamicDetail для импорта в разные модули без везения. Может быть, это не часть решения.

Ответы

Ответ 1

Если ваше изменение "text-editor" до "dynamic-detail", то ваш шаблон будет выглядеть так:

<form>
  <dynamic-detail
     [propertyName]="'code'"
     [entity]="entity"
   ></dynamic-detail>
   <dynamic-detail
      [propertyName]="'description'"
      [entity]="entity"
   ></dynamic-detail>
</form>
Компонент

DynamicDetail не имеет свойств propertyName и entity. Поэтому вы можете добавить их.

detail.view.ts

export class DynamicDetail implements AfterViewInit, OnChanges, OnDestroy, OnInit
{ 
    @Input()  public propertyName: string;
    @Input()  public entity: any;

Вторая часть решения добавляет этот компонент в RuntimeComponentModule:

type.builder.ts

protected createComponentModule (componentType: any) {
  @NgModule({
    imports: [ 
      PartsModule,
      DynamicModule.forRoot() // this line
    ],
    declarations: [
      componentType
    ],
  })
  class RuntimeComponentModule {}

  return RuntimeComponentModule;
}

После этого он должен работать Пример плунжера