Javascript Angular2子组件删除

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

---

我不确定删除子组件的正确方法是什么，这样子组件就会从视图中删除它。我目前正在调用

删除此项。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();
  }
}

@组件({
选择器：'子'，
模板：`
{{element.name}
删除
`
})
导出类子组件{
@输入（）
要素：任何；
@输出（）
elementDeleted:EventEmitter=新的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);
    }
  }

@组件({
选择器：'子'，
模板：`
`
})
导出类ParentComponent{
构造函数（）{
此参数。元素=[
{name:'element1'}，
{name:'element2'}，
(...)
];
}
onElementDeleted（元素）{
var index=this.elements.findIndex（（elt）=>（elt==element））；
如果（索引！=-1）{
本规范。元件。拼接（索引，1）；
}
}

使用EventEmitter查看@Output（）。然后您可以让父对象侦听子事件。在上面的

@组件
部分中使用
输入：['element']
与在类本身内部使用
@Input（）
有什么区别？您需要执行
（elementDeleted）=“onElementDeleted（$event）”模板中的
（而不是
（elementDeleted）=“onElementDeleted（element）”
）。这可能在您发布答案后发生了变化。此答案对我不起作用。在我达到angular的变化检测之前，一切都似乎很好-它比较拼接前后的元素变量，并在删除的元素不是元素数组的最后一个元素时检测不一致性。它删除要删除的组件请求和所有t元素列表中的前几项。