时间戳

首页 > 解决方案 > 如何修复角度取消订阅

javascript - 如何修复角度取消订阅

问题描述

TS

tempThermometer = new BehaviorSubject<any>([]);
subscription: Subscription;

    const promises = list.map(
          (url: any) =>
            new Promise(resolve => {
              this.subscription = this.global.getData(url.link).pipe(take(1)).subscribe((res) => {
                const urlArr = new Array();
                urlArr.push(url);
                this.tempThermometer.value.filter((data: any) => {
                  if (data.spinning) {
                    return data.spinning = urlArr.findIndex((x: any) => x.sensor === data.sensor) === -1
                  }
                  return;
                });
                resolve(res);
              }, (err: Error) => {
                return reject(err);
              });
            })
        );

 merge(...observables).subscribe((results) => {
           console.log(results);
}


  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }

我在这里要做的是取消订阅承诺，因为当我点击其他页面时它仍在运行/获取数据，我希望它在我点击其他页面时停止。

取消订阅不起作用。如何解决？

标签： javascriptangulartypescript

解决方案

最基本的方法是将Subscription调用返回的存储起来subscribe，然后在离开页面时调用该unsubscribe方法（ Angular 中的生命周期钩子，有关生命周期钩子的更多信息：这里）。SubscriptionngOnDestroy

在您的组件中：

ngOnInit() {
  this.sub = this.something.subscribe( ... )
}
ngOnDestroy() {
  this.sub.unsubscribe();
}

还有很多其他方法：

  • 在需要值的模板中使用异步管道。它会自动为您退订！
  • take您在示例中使用的运算符将在 N 个值后取消订阅。
  • takeWhile将根据谓词取消订阅的运算符。

这是一篇讨论 6 种不同退订方式的文章：https ://blog.bitsrc.io/6-ways-to-unsubscribe-from-observables-in-angular-ab912819a78f

推荐阅读