Angular2子组件正在删除

Angular2 child component deleting

本文关键字：删除 组件 Angular2      更新时间：2024-04-26

我有一个角度应用程序，遇到了一个问题。我有一个（父）组件，它有一个项数组，每个项都有一个子（子）组件。每个子组件都有一个按钮（和功能）来删除自己，但父组件不会收到发生此事件的通知。

我不确定删除子组件的正确方式是什么，以至于父组件将其从视图中删除。我目前只是调用delete this.product（product是父数组中的一个项），它确实将其从父数组中删除，但父数组不会更新。

您可以在子组件中以这种方式实现：

@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();
  }
}

并在母公司中利用这一事件：

@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);
    }
  }
相关文章：