jsonスキーマを使用した角4の動的コンポーネントの読み込み

Question

与えられたjsonデータ構造に従ってコンポーネントを読み込むことができるかどうか試してみるために、小さなpocを作成中です。 jsonはコンポーネントセレクタを提供し、配列します。私は、オンラインで見つけた参考資料に従って、小さな例を試しました。私は基本的にコンポーネントのカップルを作成アンギュラ

による方法をお勧めします「componentFactoryResolver」を使用し、私のモジュールに

entryComponents: [PersonalDetailsComponent, ContactDetailsComponent], 

と私のアプリのコンポーネントで、私は次のように使用をたどるようentrycomponentデコレータでそれを登録しましたコード

@ViewChild('dynamicInsert', { read: ViewContainerRef }) dynamicInsert: ViewContainerRef; 
    constructor(private componentFactoryResolver: ComponentFactoryResolver) { 
    } 
    ngAfterViewInit() { 
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(PersonalDetailsComponent); 
    const componentFactory2 = this.componentFactoryResolver.resolveComponentFactory(ContactDetailsComponent); 
    this.dynamicInsert.clear(); 
    this.dynamicInsert.createComponent(componentFactory); 
    this.dynamicInsert.createComponent(componentFactory2); 
    } 

私が使用しているコンポーネントごとにコンポーネントを作成する必要があります。これを内部ループにすることは、それを実行する最善の方法ではないかもしれません。誰かが私に正しい方法でそれをするためにいくつかの頭を与えることができれば、私は非常に感謝します。 すでにcomponentFactoryResolverは、コードからコンポーネントを動的に作成するための正しい方法で見つけてきたように、私の実際のJSONこの

{ 
     "step":"1", 
     "viewed":false, 
     "stepDependant":{ 
      "parentComponent":null, 
      "childComponent":null, 
      "varMap":null 
     }, 
     "widgets":[ 
      { 
       "Component":"shipper", 
       "inputs":[ 
        { 
        "ServiceLine":"Export" 
        } 
       ], 
       "outputs":[ 

       ], 
       "name":"Shipper Details" 
      }, 
      { 
       "Component":"shipper", 
       "inputs":[ 
        { 
        "ServiceLine":"Export" 
        } 
       ], 
       "outputs":[ 

       ], 
       "name":"Consignee Details" 
      }, 
      { 
       "Component":"status-of-shipment", 
       "inputs":[ 

       ], 
       "outputs":[ 

       ], 
       "name":"Status of Shipment" 
      } 
     ] 
     } 

多くのようなもののように見えるでしょうが、あなたの入力

Answer 1

を感謝しています。 このアプローチでは、コンポーネントセレクタをコンポーネントタイプにマップするマップまたはサービスを作成します。このようにして、JSONデータから動的コンポーネントを作成するときに、型をすばやく参照できます。これらのタイプから、ファクトリを解決して、サンプルのようなコンポーネントを追加します。

あなたは別の選択肢を知られているコンポーネントの定義済みのセットは、このような親コンポーネントに<ng-template>としてそれらすべてを定義するだろうしている場合：

<ng-template #shipper><shipper ></shipper></ng-template> 
<ng-template #statusOfShippment><status-of-shipment ></status-of-shipment></ng-template> 

次にあなたが使用して、コンポーネント内のテンプレートを取得することができます@ViewChildデコレータ。

@ViewChild('shipper') 
shipperTemplate: TemplateRef<any>; 
@ViewChild('statusOfShippment') 
statusOfShippmentTemplate: TemplateRef<any>; 

そして、工場と同じような方法でコンポーネントを作成することができます。

this.dynamicInsert.createEmbeddedView(shipper); 
this.dynamicInsert.createEmbeddedView(statusOfShippment); 

このアプローチの利点は、従来のテンプレートバインディングを使用して、すべてのテンプレートに異なるコンテキストオブジェクトを送信できることです。

<ng-template #shipper><shipper [ServiceLine]="ServiceLine"></shipper></ng-template> 

this.dynamicInsert.createEmbeddedView(shipper, {ServiceLine:"Export"}); 

このようにして、JSONから作成したオブジェクトを直接送信し、コンポーネントバインディングを構成することができます。コンポーネントファクトリを使用する場合は、コードからすべてを手動で設定する必要があります。