多次单击按钮时的Angular 6订阅清理答案

【问题标题】：Angular 6 Subscription cleanup when clicking a button multiple times多次单击按钮时的Angular 6订阅清理
【发布时间】：2018-11-27 21:50:37
【问题描述】：

假设我有一个订阅联系我们服务的联系我们按钮，该按钮在触发 http 请求后返回一个 observable。

如果用户点击按钮 10 次并发送 10 封电子邮件（需要），是否会同时运行 10 个订阅？如果是这样，在这种情况下订阅清理的最佳做法是什么？

【问题讨论】：

如果你展示你正在使用的代码会更容易，因为答案很大程度上取决于它。
可以查看当前订阅是否关闭。 reactivex.io/rxjs/class/es6/…

标签： angular rxjs

【解决方案1】：

只需将您的订阅保存在一个属性中并检查它是否存在，不要订阅，如果不订阅则订阅

cacheSub: Subscription;

contactUs() {
  if(!this.cacheSub) {
     this.cacheSub = this.service.cacheSub.subscribe(....);
  }
}

编辑

如果你想每次订阅并清理每个订阅，你可以这样做

cacheSub: Subscription;

contactUs() {
     this.cacheSub = this.service.cacheSub.subscribe(() => {
        // some code here if you need it
        this.cacheSub.unsubscribe();
     });
}

或

contactUs() {
    this.cacheSub && this.cacheSub.unsubscribe();
    this.cacheSub = this.service.cacheSub.subscribe(() => {
            // some code here if you need it
    });
}

【讨论】：

我必须澄清...我希望能够单击该按钮 10 次并发送 10 封电子邮件，我的问题更多的是当用户再次单击该按钮时，会发生什么或我应该怎么做第一次订阅。
@RandomUs1r 我没明白你的意思，当你订阅 observable 时你应该如何发送电子邮件？如果你能分享你的代码会更好
我可以稍后发布代码，但是，我有一个由 UI 按钮调用的函数，然后订阅调用 Web api 方法来发送电子邮件的服务。
@RandomUs1r 我已经更新了我的答案，请检查是否是你需要的
下面的两个解决方案看起来不错，但我最终使用了 take(1)，谢谢！

【解决方案2】：

如果您在订阅时将take(1) 添加到管道中，则可以避免取消订阅 - 如果您订阅了多次

或者，在带有按钮的组件中拥有一个订阅，您在ngOnInit() 或constructor 中对其进行初始化。在private contactSubscription: SubscriptionLike 属性中保存对订阅的引用，并在ngOnDestroy() 中调用contactSubscription && contactSubscription.unsubscribe

【讨论】：

take(1) 是处理我的场景的一种非常简洁的方法，谢谢！
没有问题，我也是在这里提问才发现的！感谢您的反馈?