按钮上发生的多个订阅单击

Question

我有一个包含项目列表的组件，其中，在每个项目中，一个按钮允许用户删除所述项目。

点击delete按钮后，会打开一个模态，并确认是否要删除该项目。单击delete按钮时，将触发以下函数：

public removeSite(site: site): void {
    this.deleteSiteModal.open(site);

    site.siteDeletion = true;

    this._subscriptions.push(this.deleteSiteModal.siteToDelete.subscribe((siteToDelete) => {
        if (siteToDelete) {
            this._subscriptions.push(this.myService.deleteSite(siteToDelete.guid).subscribe(sites => {
        }
    }));
}

最终发生的事情是，每次单击此按钮时，都会发生多个订阅，这会导致发出多个请求。项目将被删除，然后它将尝试再次删除相同的项目并因为找不到而失败。

我的同事提到我应该在我的组件之外订阅一次siteToDelete，并且只在点击按钮时执行操作。

对此有何想法或解决方法？

由于

Answer 1

我同意你的同事。组件不应该担心实际删除站点。组件工作是从输入和服务中获取信息以显示给用户并将用户输入引导到输出和服务。话虽这么说，从已完成的模态中获取信息并将它们传递出去是一个灰色区域，我不会无法解雇它。但是，我认为可能有两个更好的选择。

您的模态组件应直接调用某些站点管理服务的删除方法，或者某些站点管理服务应订阅siteToDelete。