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

Question

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

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

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

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

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

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

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

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

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

к

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

Когда это происходит, я сталкиваюсь с исключением выше. Видимо, компилятор не знаком с динамическими деталями, когда это делается рекурсивно.

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

Answer 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;
}

После этого должен работать Plunker Example