按钮单击时发生多个订阅

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。