ngForを使用して複数のコンポーネントセレクタタグを表示できますか？

Question

私は角度2の質問があります。 ですので、ローカルのjsonから{data}}タグを表示してデータを表示するためにngForを使用することができます。

しかし、jsonに格納されているコンポーネントセレクタタグをレンダリングしてng内に表示するかどうかは不思議でした。 （問題に関する説明のコメントを参照してください）

import { Component, OnInit } from '@angular/core'; 
import * as jQuery from 'jquery'; 

@Component({ 
    selector: 'app-dashboard', 
    templateUrl: './dashboard.component.html', 
    styleUrls: ['./dashboard.component.css'] 
}) 
export class DashboardComponent implements OnInit { 
widgets; 
    constructor() { } 

    ngOnInit() { 

    this.widgets = [ 
{ 
    "widgetcode": "<app-analytics-widget></app-club-chooser>" //Existing component selector tag within the angular cli system 
}, 
{ 
    "widgetcode": "<app-club-chooser></app-club-chooser>" //Existing component selector tag within the angular cli system 
}, 
{ 
    "widgetcode": "<app-account-widget></app-account-widget>" //Existing component selector tag within the angular cli system 
} 



    ] 
    } 

} 

私component.htmlファイル：

<div class="DahsboardWrapper"> 

<!-- DashBoard Ges here --> 

<!-- widget elements go here --> 
<div class="DashoardHeaderClass" id="dashboard"> 
Dashboard Loaded 
<div class="WidgetAreaWrapper"> 
<div class="widgets" *ngFor="let widget of widgets"> 


<!-- {{widget.widgetcode}} Not working atm..--> 
<!-- this is displayng just plain text --> 
</div> 

<!-- This is working --> 
<app-analytics-widget></app-analytics-widget> 
<app-club-chooser></app-club-chooser> 
<app-account-widget></app-account-widget> 

</div> 
</div> 

多分theresの任意の提案例えば、 私はこのJSONに私のファイルにcomponent.tsを持っていますこれを行う良い方法は？

Answer 1

セレクタから移動することはできません。コンパイラはビルド時に実行されるため、Ahead of Time（AoT）コンパイラでは動作しません。コンパイラはコンポーネントとディレクティブのセレクタに一致します。

タグの数が限られている場合は、ngSwitchを使用できます。サポートする各コンポーネントはswitchcaseのいずれかになり、JSONの文字列プロパティで表示するコンポーネントを選択します。 [ngSwitch]全体がngForアイテムになります。

さらに複雑なシナリオをサポートする必要があり、角度4を使用する場合は、ngComponentOutlet'を使用できます。これにはセレクタではなくType（クラスのインポート）が必要でした。

最後に、一般的なコンポーネントを動的にロードするための角度4も、このライブラリでサポートされている多くの方法によってどちらの方法が最も理にかなっているかを選択できます。https://github.com/apoterenko/ngx-dynamic-template