2

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

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

如何使用/创建动态模板来使用 Angular 2.0 编译动态组件？

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

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

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

4

1 回答 1

2

如果您更改"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属性。所以你可以添加他们的。

详细视图.ts

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

解决方案的第二部分是将此组件添加到RuntimeComponentModule：

类型.builder.ts

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

  return RuntimeComponentModule;
}

之后它应该可以工作Plunker Example

于 2016-10-04T10:34:43.580 回答