チャートコンポーネントを角度4で動的にロードしますか？

Question

私は角度4で再利用可能なチャートコンポーネントをいくつか作成しました。すべてのデータはREST APIからのチャートを描画します。親コンポーネントをロードするときには、チャートのリストのデータを次の形式で取得します。

[ 
    { 
     "chartId":1, 
     "chartType":"Bar" 
    }, 
    { 
     "chartId":2, 
     "chartType":"Pie" 
    } 
] 

グラフコンポーネントに属性セレクタを使用しています。例えば、

<div app-bar-chart></div> 

は、私は何をしたい、私はチャートリストJSONを反復処理する必要がありますされており、「ChartTypeを」に従って、私は属性を設定する必要があります。たとえば 'chartType'が 'Pie'の場合、要素は

<div app-pie-chart></div> 

とする必要があります。ありがとうございました。

Answer 1

属性を設定できますが、そこから開始されるコンポーネントは取得できません。

これはどのように行うことができます。コンポーネントクラスへの参照が含まれているJSONを作成し、文字列ではありません：

<ng-container *ngFor="let c of components"> 
    <ng-container *ngComponentOutlet="c"></ng-container> 

詳細については、これらの記事を読む：

export class BarComponent {...} 
export class PieComponent {...} 

... 

const components = [ 
    { 
     "chartId": 1, 
     "chartType": BarComponent < ---component class reference 
    }, 
    { 
     "chartId": 2, 
     "chartType": PieComponent 
    } 
] 

はその後、これらのコンポーネントをレンダリングするNgComponentOutletを使用

• Exploring Angular DOM manipulation techniques using ViewContainerRef
• Here is what you need to know about dynamic components in Angular