angle2のコンポーネントを動的に削除して追加するにはどうすればよいですか？

Question

"FancyButton"と定義されたコンポーネントがあります。私は、テンプレートにここでそれを持っている：

... 
<div class="container"> 
    <div class="fancy"> 
    <fancybutton></fancybutton> 
    </div> 
    <button (click)="removeFancyButton">Remove</button> 
    <button (click)="addFancyButton">Add</button> 
</div> 
... 

私の質問は、どのように私はプログラム的に削除することができますされています

<div class="fancy"> 
    <fancybutton></fancybutton> 
    </div> 

私は、削除ボタンをクリックすると？逆に、私はどのようにそれを戻しますか？可能であればngOnDestroyをトリガーし、「再追加」するとngOnInitが再び追加されたときにトリガーされます。

これは私のファンシーボタンコンポーネントです。 home.component.html内での統合：

@Component({ 
    selector: 'fancy-button', 
    template: `<button>clickme</button>` 
}) 
export class FancyButton {} 

@Component({ 
    selector: 'home', // <home></home> 
    providers: [ 
    Title 
    ], 
    styleUrls: [ './home.component.css' ], 
    templateUrl: './home.component.html' 
}) 

Answer 1

が*ngIf試してみる、示されることになっていないDOM要素を削除し、逆にそれが

ときにDOM要素を追加します

{式}に基づいてDOMツリーの一部を削除または再作成します。

... 
<div class="container"> 
    <div *ngIf="showButton" class="fancy"> 
    <fancybutton></fancybutton> 
    </div> 
    <button (click)="removeFancyButton">Remove</button> 
    <button (click)="addFancyButton">Add</button> 
</div> 
... 

@Component({ 
    selector: 'home', // <home></home> 
    providers: [ 
    Title 
    ], 
    styleUrls: [ './home.component.css' ], 
    templateUrl: './home.component.html', 
    directives: [FancyButton], 
}) 
export class Home { 
    showButton: Boolean = true; 

    addFancyButton() { 
     // Do everything you need to 
     this.showButton = true; 
    } 
    removeFancyButton() { 
     // Do everything you need to 
     this.showButton = false; 
    } 
} 

Answer 2

真isFancyBtnVisible =のようないくつかのコンポーネントのプロパティを宣言し、クリック時にそれを変更。次に、ボタンのコンポーネントで* ngIf = "isFancyBtnVisible"を使用します。

Answer 3

* ngIfを使用すると、trueの場合はngOnOnit、falseの場合はngOnDestroyが呼び出されます。

<fancy-button *ngIf="showButton"></fancy-button>

Answer 4

あなただけの命令的に追加された命令的コンポーネントを削除することができます。例については、Angular 2 dynamic tabs with user-click chosen componentsを参照してください。それ以外の場合は*ngIf="expr"を使用します。式がfalseの場合、コンテンツは削除されます。