我有一个 Angular 应用程序,但遇到了问题。我有一个(父)组件,它有一个项目数组,每个项目都有一个子(子)组件。每个子组件都有一个按钮(和功能)来删除自己,但不会通知父组件发生此事件。
我不确定删除子组件的正确方法是什么,以至于父组件将其从 View 中删除。我目前只是调用 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);
}
}
关于javascript - Angular2子组件删除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36558807/