Question

我有多个组件，每个组件中都有一个显示“destroy”的按钮，在下面的例子中，这个按钮会有4个实例：

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

我可以在组件的“销毁”功能中放置什么，以便它只销毁被点击的“mycomponent”实例？

Answer 1

一种可能的选择：您可以在容器的viewmodel中定义应与其数据一起显示的组件。该视图仅将所有组件呈现为数组。需要删除的组件会发出容器捕获的事件。这会触发容器代码，以从需要呈现的组件列表中删除组件。

视图模型：

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

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

模板：

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

此示例使用按钮而不是mycomponent。但只要你的组件发出一个容器可以监听它的事件就可以了。

如何在angular2中以编程方式销毁“self”组件？

1 个答案: