angular2中的递归动态模板编译 [英] recursive dynamic template compilation in angular2

问题描述

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

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

我如何使用/创建动态模板以使用Angular 2.0编译动态组件?

可以在此处找到上述问题中描述的可工作的矮人.

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

动态详细信息"不是已知元素: 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添加到不同模块中的导入中，但没有任何运气.也许那不是解决方案的一部分.

解决方案

如果将"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;
}

此后它应该可以工作 柱塞示例

I've based some of my work on the same problem described in here:

dynamic template to compile dynamic Component with Angular 2.0

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

The working plunker described in the question above can be found here.

The problem occours if the dynamic-detail tries to create another dynamic view that uses dynamic-detail in the template. If i try to do that i get the following exception.:

'dynamic-detail' is not a known element: 1. If 'dynamic-detail' is an Angular component, then verify that it is part of this module.

This is easily reprocuded by changing the logic in the plunker to create a dynamic template that outputs "<dynamic-detail></dynamic-detail>".

In the file "app/dynamic/template.builder.ts" I've changed the following code:

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

To

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

When that happens i run into the exception above. Apparently the compiler is not familiar with dynamic-detail when it is done recursively.

I've tried to add the DynamicDetail to imports in the different modules without any luck. Maybe that's not part of the solution.

解决方案

If your change "text-editor" to "dynamic-detail" then your template will look like:

<form>
  <dynamic-detail
     [propertyName]="'code'"
     [entity]="entity"
   ></dynamic-detail>
   <dynamic-detail
      [propertyName]="'description'"
      [entity]="entity"
   ></dynamic-detail>
</form>

DynamicDetail component doesn't have propertyName and entity properties. So you can add their.

detail.view.ts

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

Second part of solution is add this component to RuntimeComponentModule:

type.builder.ts

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

  return RuntimeComponentModule;
}

After that it should work Plunker Example

这篇关于angular2中的递归动态模板编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！