Angular中如何取消嵌套observable的订阅以避免重复订阅

问题原因 #

你当前的写法属于嵌套订阅，外层queryParamMap的订阅回调每次触发都会生成一个独立的_getData内层订阅，而你仅将外层路由参数的订阅加入了统一管理的_subscription，所有内层_getData的订阅都没有被托管，因此每次参数变化都会残留上一次的订阅，最终导致内存泄漏和重复请求问题。

最优解决方案：使用switchMap操作符 #

RxJS提供的switchMap操作符天生适配「上游事件触发后切换到新的内层Observable，且自动取消前一个内层Observable订阅」的场景，不需要手动管理内层订阅，是官方推荐的写法。

修改后的代码如下：

import { switchMap } from 'rxjs/operators';

// 其余原有代码保持不变
ngOnInit(): void {
  this._subscription.add(
    this.route.queryParamMap.pipe(
      switchMap((params) => this._getData(params.get('name')))
    ).subscribe()
  );
}

ngOnDestroy(): void {
  this._subscription.unsubscribe();
}

该写法下每次路由参数变化时，switchMap会自动取消上一次未完成的_getData订阅，仅保留最新一次的请求订阅；组件销毁时外层订阅取消也会连带当前内层订阅一起取消，不会有订阅残留。

备选方案：手动管理内层订阅 #

如果你不想额外引入操作符，也可以单独声明变量存储_getData的订阅，每次创建新订阅前先取消前一次的：

import { Subscription } from 'rxjs';

// 类内新增私有变量
private _dataSubscription?: Subscription;

// 其余原有代码保持不变
ngOnInit(): void {
  this._subscription.add(
    this.route.queryParamMap.subscribe((params) => {
      // 创建新订阅前先取消前一次的订阅
      this._dataSubscription?.unsubscribe();
      this._dataSubscription = this._getData(params.get('name')).subscribe();
    })
  );
}

ngOnDestroy(): void {
  this._subscription.unsubscribe();
  // 组件销毁时也要取消内层剩余订阅
  this._dataSubscription?.unsubscribe();
}

该写法也能实现需求，但手动管理多份订阅容易出现遗漏，更推荐使用第一种switchMap的实现方案。

内容的提问来源于stack exchange，提问作者Ibrahim Ali