如何在angular2中以編程方式銷燬「self」組件？

Question

我有多個組件，每個組件有一個按鈕，上面寫着「消滅」，在下面的例子中，就不會有這個按鈕的4個實例：

<div class="container"> 
<mycomponent></mycomponent> 
<mycomponent></mycomponent> 
<mycomponent></mycomponent> 
<mycomponent></mycomponent> 
</div> 

我可以把什麼在「消滅」該組件的功能是否僅銷燬點擊「mycomponent」的實例？

Answer 1

一種可能的選擇：您可以定義應在容器的視圖模型中與其數據一起顯示的組件。該視圖只是將所有組件全部渲染爲一個數組。需要刪除的組件發出容器捕獲的事件。這會觸發容器代碼從需要呈現的組件列表中刪除組件。

視圖模型：

components = [{ 
    id: "a", 
    val: 5 
}, { 
    id: "b", 
    val: 7 
}]; 

removeComponent(id) { 
    this.components = this.components.filter(e => e.id != id); 
} 

模板：

<div *ngFor="let component of components"> 
    <button (click)="removeComponent(component.id)"> 
     Remove {{component.val}} 
    </button> 
</div> 

這個例子使用的，而不是myComponent的一個按鈕。但只要你的組件發出一個事件，你的容器就可以聽到它是一樣的。