typescript - Angular2 でコンポーネントを非表示にして置き換える方法

Question

こんにちは、親コンポーネント (A) があり、2 つの子コンポーネント (B と C) があります。親Aはデフォルトで子コンポーネントBを表示します。親Aに表示されているボタンをクリックすると、子コンポーネントBが子コンポーネントCに置き換えられます.angular2でボタンをクリックした後、コンポーネントBをコンポーネントCに置き換えるにはどうすればよいですか?

Answer 1

通常、親 A のテンプレートには両方のコンポーネントがありますが、必要なngIf場合にのみ表示されるようにするには、 を使用します。

<button (click)="setButtonClicked(true)">Click Me</button>
<component-b *ngIf="!buttonWasClicked"></component-b>
<component-c *ngIf="buttonWasClicked"></component-c>

親 A のモデルでは、プロパティを設定するための対応するコードがあります。

buttonWasClicked: boolean = false;

setButtonClicked(clicked: boolean) {
    this.buttonWasClicked = clicked;
}

NgSwitchの代わりに使用することをお勧めしますNgIf。