angular2中的递归动态模板编译

Posted 2023-03-13

【中文标题】angular2中的递归动态模板编译

【英文标题】：recursive dynamic template compilation in angular2

【发布时间】：2017-02-07 20:20:28

【问题描述】：

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

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

How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

上面问题中描述的工作 plunker 可以在here找到。

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

'dynamic-detail' 不是已知元素： 1. 如果 'dynamic-detail' 是一个 Angular 组件，那么验证它是这个模块的一部分。

这很容易通过更改 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 添加到不同模块中的导入中，但没有任何运气。也许这不是解决方案的一部分。

【参考方案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

【讨论】：

谢谢！这实际上工作得很好！然而，下一个问题很快就来了。现在我想在其中一个部分渲染动态细节。然后我得到和以前一样的错误。如果我在 parts.module 中将 DynamicDetail 作为 forwardRef 执行，我将得到堆栈溢出异常。如果我在 partsModule 中导入 DynamicModule.forRoot() 我会得到一个“未定义的异常”......我怎样才能让我的任何部分也呈现动态细节？

plnkr.co/edit/UYnQHF?p=preview 看看parts.module.ts 和dynamic.module.ts 但是如果你在动态组件中设置相同的模板你会得到循环调用