動的コンポーネント

Question

ビューでコンポーネントを動的に表示するには、どのような方法が適していますか？

例として、ナビゲーションとビューを持つコンポーネントがあります。ナビゲーション内のボタンをクリックすると、ビュー内にさまざまなサブコンポーネントが表示されたり消えたりするはずです。各サブコンポーネントは異なるタイプのサブコンポーネントです。

import { Component, Input } from '@angular/core'; 
import { Controls } from './controls.service'; 

@Component({ 
    selector: 'Controlpanel', 
    templateUrl: 'app/templates/controlPanel.component.html', 
    directives: Controls.directives() 
}) 
export class ControlPanelComponent { 
    controls = Controls.objects; 
    activeControl:string = Controls.objects[0].name; 
} 

-

<nav class="container-fluid"> 
    <div class="row"> 
      <a *ngFor="let control of controls" (click)="toggleControl(control.name, $event)" role="button" href="#" class=" text-uppercase"> 
       {{control.name}} 
      </a> 
    </div> 
</nav> 
<div> 
    <this is where i want the sub-component to appear/> 
</div> 

Answer 1

あなたはあなたのフォーム上にロードして、各コントロールに*のngIfを追加する各コントロールを追加するような何かを行うことができますが、私はそのように行かないだろう。

ディレクティブをロードする場所を追加します。そして、あなたが表示したいコンポーネント（ディレクティブ）を示しchildRouteを作成します。

<nav class="container-fluid"> 
    <div class="row"> 
      <a *ngFor="let control of controls" (click)="toggleControl(control.name, $event)" role="button" href="#" class=" text-uppercase"> 
       {{control.name}} 
      </a> 
    </div> 
</nav> 
<div> 
     <!-- this is where you show your sub-component t by routing --> 
    <router-outlet></router-outlet> 

    </div>