angular2中的递归动态模板编译

angular2中的递归动态模板编译,angular,typescript,compilation,angular2-compiler,Angular,Typescript,Compilation,Angular2 Compiler,我的一些工作基于此处描述的相同问题: 使用Angular 2.0编译动态组件的动态模板 可以找到上述问题中描述的工作活塞 如果动态详细信息尝试创建另一个在模板中使用动态详细信息的动态视图,则会出现问题。如果我尝试这样做,会出现以下异常: “动态细节”不是已知元素: 1.如果“动态细节”是一个角度组件,则验证它是否是此模块的一部分。 通过更改plunker中的逻辑,创建一个输出“”的动态模板,可以很容易地对其进行重新调整 在文件“app/dynamic/template.builder.ts”中

我的一些工作基于此处描述的相同问题:

使用Angular 2.0编译动态组件的动态模板

可以找到上述问题中描述的工作活塞

如果动态详细信息尝试创建另一个在模板中使用动态详细信息的动态视图,则会出现问题。如果我尝试这样做,会出现以下异常:

“动态细节”不是已知元素: 1.如果“动态细节”是一个角度组件,则验证它是否是此模块的一部分。

通过更改plunker中的逻辑,创建一个输出“
”的动态模板,可以很容易地对其进行重新调整

在文件“app/dynamic/template.builder.ts”中,我更改了以下代码:

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

当这种情况发生时,我遇到了上面的异常。显然,当以递归方式进行时,编译器并不熟悉动态细节

我曾尝试在不同模块中将DynamicDetail添加到导入中,但没有任何运气。也许这不是解决方案的一部分

如果将
“文本编辑器”
更改为
“动态详细信息”
,则您的模板将如下所示:

<form>
  <dynamic-detail
     [propertyName]="'code'"
     [entity]="entity"
   ></dynamic-detail>
   <dynamic-detail
      [propertyName]="'description'"
      [entity]="entity"
   ></dynamic-detail>
</form>
解决方案的第二部分是将此组件添加到
RuntimeComponentModule

type.builder.ts

export class DynamicDetail implements AfterViewInit, OnChanges, OnDestroy, OnInit
{ 
    @Input()  public propertyName: string;
    @Input()  public entity: any;
protected createComponentModule (componentType: any) {
  @NgModule({
    imports: [ 
      PartsModule,
      DynamicModule.forRoot() // this line
    ],
    declarations: [
      componentType
    ],
  })
  class RuntimeComponentModule {}

  return RuntimeComponentModule;
}

在那之后它应该可以工作了,谢谢!这真的很管用!然而,下一个问题很快就出现了。现在我想在其中一个部分中渲染动态细节。然后我得到了和以前一样的错误。如果我在parts.module中作为forwardRef执行DynamicDetail,我将得到一个堆栈溢出异常。如果我在partsModule中导入DynamicModule.forRoot(),我会得到一个“未定义的异常”。。。我如何让我的任何部分也渲染动态细节?查看
parts.module.ts
dynamic.module.ts
,但是如果您在动态组件中设置相同的模板,您将得到循环调用
protected createComponentModule (componentType: any) {
  @NgModule({
    imports: [ 
      PartsModule,
      DynamicModule.forRoot() // this line
    ],
    declarations: [
      componentType
    ],
  })
  class RuntimeComponentModule {}

  return RuntimeComponentModule;
}