角度2動的コンポーネント表示

私はいくつかのアドバイスが必要です。私はAngular2でダッシュボードを開発しています。私のプロジェクトは異なるタイプを持つことができ、これらのタイプに関連するコンポーネントを表示したいとします。角度2動的コンポーネント表示

<div *ngIf="project.types.type1"> 
    <app-type1></app-type1> 
</div> 
<div *ngIf="project.types.type2"> 
    <app-type2></app-type2> 
</div> 
<div *ngIf="project.types.type3"> 
    <app-type3></app-type3> 
</div>

しかし、私はそれがこれを見ることができる、よりエレガントな方法でそれを書き込むことが可能ですかどうかを知りたい：

これは私が今のために行う方法です

<div *ngFor="let key of project.types | keys"> 
     <template name="app-{{key}}></template> 
    </div>

感謝を

出典

2016-12-02 Julien Deruere

あなたのプロジェクトタイプに基づいて、 'router-outlet'の異なるコンポーネントを読み込むために、別々のルートを使用するかもしれませんが、それについて考えましたか？ –

これらのコンポーネントの内容（ 'app-type1'、' app-type2' ...）は何ですか？それがちょうどテンプレートの場合は、ここのように 'ngTemplateOutlet'や' ngForTemplate'を使うことができますhttp://stackoverflow.com/questions/39974126/how-to-pass-an-expression-to-a-component-as-an- input-in-angular2/39977298＃39977298 – yurzui

@MadhuRanjan私のプロジェクトには多くの種類があります。それぞれのタイプはコンポーネントとして表示できます。たとえば、プロジェクトにtype1がある場合はapp-type1コンポーネントが含まれ、type2もある場合はapp-type1とapp-type2が表示されます。 –

これはあなたが探していたループソリューションではありませんが、現在のやり方から優雅さはやや改善されています（私の意見では）

<div [ngSwitch]="project.types"> 

    <app-type1 [*ngSwitchCase]="project.types.type1"></app-type-1> 
    <app-type2 [*ngSwitchCase]="project.types.type2"></app-type-2> 
    <app-type3 [*ngSwitchCase]="project.types.type3"></app-type-3> 

</div>

出典

2016-12-02 20:13:55

角度2動的コンポーネント表示

答えて

関連する問題