Wie "selbst" Komponente programmatisch in angular2 zu zerstören?

Question

ich mehrere Komponenten aufweisen, in jeder Komponente gibt es eine Taste, die „zerstören“, im folgenden Beispiel sagt, gäbe es vier Instanzen dieser Schaltfläche sein:

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

Was kann ich in der put „zerstören“ Funktion der Komponente so, dass sie nur die Instanz von "mycomponent" zerstört, auf die geklickt wird?

Answer 1

Eine mögliche Option: Sie definieren die Komponenten, die zusammen mit ihren Daten im Viewmodel Ihres Containers angezeigt werden sollen. Die Ansicht rendert nur alle Komponenten als Array. Die Komponente, die entfernt werden muss, gibt ein Ereignis aus, das vom Container erfasst wird. Dies löst den Containercode aus, um die Komponente aus der Liste der Komponenten zu entfernen, die gerendert werden müssen.

Ansichtsmodell:

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

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

Vorlage:

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

Dieses Beispiel eine Schaltfläche statt MyComponent verwendet. Aber solange Ihre Komponente ein Ereignis ausgibt, das Ihr Container abhören kann, ist es dasselbe.