Как динамически удалять и добавлять обратно компонент в угловом2?

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 на основе выражения {expression}.

... 
<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 = True и изменить его по щелчку. Затем используйте * ngIf = "isFancyBtnVisible" на компоненте вашей кнопки

Answer 3

Если вы используете * ngIf, он будет вызывать ngOnOnit, когда true и ngOnDestroy, когда false.

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

Answer 4

Вы можете удалить только компоненты императивно, которые были добавлены императивно. Например, см. Angular 2 dynamic tabs with user-click chosen components. В противном случае используйте *ngIf="expr". Если выражение ложно, содержимое удаляется.