angular2中的递归动态模板编译

Question

我的一些工作是基于这里描述的相同问题:

动态模板:用Angular 2.0编译动态组件

在Angular 2.0中如何使用/create动态模板来编译动态组件?

上面问题中描述的工作柱塞可以在这里找到。

如果dynamic-detail试图在模板中创建另一个使用dynamic-detail的动态视图，就会出现问题。如果我尝试这样做，我会得到以下异常:

'dynamic-detail'不是已知元素:1. 如果'dynamic-detail'是Angular组件，那么请验证它是否属于该模块。

这很容易通过改变柱塞中的逻辑来创建一个输出"<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示例