angular2でプログラム的に "self"コンポーネントを破壊する方法は？

Question

各コンポーネントに「破壊する」というボタンがあり、私は、次の例では、このボタンの4つの事例があるだろう、複数のコンポーネントを持っている：

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

私は「破壊」に何を置くことができますコンポーネントは、クリックされた "mycomponent"のインスタンスのみを破壊するように機能しますか？

Answer 1

1つの可能なオプション：データとともに表示するコンポーネントをコンテナのビューモデルに定義します。このビューでは、すべてのコンポーネントがすべて配列としてレンダリングされます。削除が必要なコンポーネントは、コンテナによって取得されたイベントを発行します。これにより、コンテナコードがトリガされ、レンダリングが必要なコンポーネントのリストからコンポーネントが削除されます。

のViewModel：

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ののボタンを使用しています。しかし、あなたのコンポーネントがあなたのコンテナが聞くことができるイベントを出す限り、それは同じです。