2

ここで説明されているのと同じ問題に基づいて、いくつかの作業を行いました。

Angular 2.0 で動的コンポーネントをコンパイルするための動的テンプレート

動的テンプレートを使用/作成して動的コンポーネントを Angular 2.0 でコンパイルするにはどうすればよいですか?

上記の質問で説明されている作業プランカーは、ここにあります。

dynamic-detail がテンプレートで dynamic-detail を使用する別の動的ビューを作成しようとすると、問題が発生します。それをやろうとすると、次の例外が発生します。

'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>

DynamicDetailpropertyNameコンポーネントにはandentityプロパティがありません。したがって、それらを追加できます。

detail.view.ts

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

ソリューションの 2 番目の部分は、このコンポーネントを次の場所に追加することですRuntimeComponentModule。

type.builder.ts

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

  return RuntimeComponentModule;
}

その後、動作するはずです プランカーの例

于 2016-10-04T10:34:43.580 に答える