Angular2 Kind Komponente löschen

Question

Ich habe eine eckige Anwendung, und ich habe ein Problem. Ich habe eine (übergeordnete) Komponente mit einem Array von Elementen, für jedes Element gibt es eine untergeordnete (untergeordnete) Komponente. Die untergeordneten Komponenten haben jeweils eine Schaltfläche (und Funktion), um sich selbst zu löschen, aber die übergeordnete Komponente wird nicht über dieses stattfindende Ereignis benachrichtigt.

Ich bin mir nicht sicher, was die richtige Art ist, die untergeordnete Komponente so zu entfernen, dass die übergeordnete Komponente sie aus der Ansicht entfernt. Ich rufe gerade delete this.product (Produkt ist eines der Elemente im übergeordneten Array), die tatsächlich aus dem übergeordneten Array entfernt, aber das übergeordnete Array wird nicht aktualisiert.

Answer 1

Sie können dies auf diese Weise in der Komponente Kind implementieren:

@Component({ 
    selector: 'child', 
    template: ` 
    <div> 
     {{element.name}} 
     <span (click)="deleteElement()">Delete</span> 
    </div> 
    ` 
}) 
export class ChildComponent { 
    @Input() 
    element: any; 
    @Output() 
    elementDeleted: EventEmitter<any> = new EventEmitter(); 

    deleteElement() { 
    this.elementDeleted.emit(); 
    } 
} 

und nutzen diese Veranstaltung im parent:

@Component({ 
    selector: 'child', 
    template: ` 
    <div> 
     <child *ngFor="#element of elements" [element]="element" 
      (elementDeleted)="onElementDeleted(element)"> 
     </child> 
    </div> 
    ` 
}) 
export class ParentComponent { 
    constructor() { 
    this.elements = [ 
     { name: 'element1' }, 
     { name: 'element2' }, 
     (...) 
    ]; 
    } 

    onElementDeleted(element) { 
    var index = this.elements.findIndex((elt) => (elt===element)); 
    if (index != -1) { 
     this.elements.splice(index, 1); 
    } 
    }