Angular中使用Observable是否需要手动执行取消订阅操作？

首先需要明确：取消订阅的规则核心取决于你使用的Observable类型，不存在通用的“必须/不需要取消”结论，针对你提到的三种方案，实际适用场景如下：

• 方案1：不存储subscription直接订阅
  仅适用于单次执行后会自动触发complete的有限冷Observable，比如HttpClient发起的HTTP请求：Angular 封装的HttpClient返回的Observable会在请求成功/失败后自动完成，资源会自动释放，这种场景下不存储订阅也不会产生内存泄漏。但如果是路由参数监听ActivatedRoute.params、表单值变化FormControl.valueChanges、自定义长连接Subject这类不会自动完成的Observable，用这种方式必然会产生内存泄漏。
• 方案2：存储subscription，在ngOnDestroy中手动取消
  这是官方推荐的通用安全方案，适配所有Observable场景，不管是单次完成的HTTP请求还是长生命周期的持续发射Observable，这么做都不会出错。如果存在多个订阅，可以用RxJS内置的Subscription实例统一管理：

  private subscriptions = new Subscription();
  
  // 新增订阅时统一加入管理
  this.subscriptions.add(
    this.service.makeHTTPCall(stuff).subscribe(x => {
      // 业务逻辑
    })
  );
  this.subscriptions.add(
    this.form.get('account').valueChanges.subscribe(val => {
      // 业务逻辑
    })
  );
  
  ngOnDestroy() {
    // 一次性取消所有订阅
    this.subscriptions.unsubscribe();
  }
  

• 方案3：不做任何处理等待Angular自动处理
  只有两种场景合法：一是上述的HttpClient自动完成类Observable，二是在模板中使用async管道订阅的Observable——async管道内置了组件销毁时自动取消订阅的逻辑，这也是官方优先推荐的订阅方式，能在模板处理的数据流优先用async管道，完全不需要手动管理订阅。除此之外所有场景都不能用这种方案，一定会产生内存泄漏。

无第三方依赖的简化实现 #

除了上述统一管理Subscription的方式，还可以用RxJS原生操作符实现更简洁的订阅管理，不需要引入第三方库：

private destroy$ = new Subject<void>();

this.service.makeHTTPCall(stuff)
  .pipe(takeUntil(this.destroy$))
  .subscribe(x => {
    // 业务逻辑
  });

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

所有被takeUntil(this.destroy$)修饰的Observable，都会在destroy$发射值时自动取消订阅，不需要手动维护每个订阅的引用，适合订阅数量较多的场景。

最终选择建议 #

1. 能用模板async管道处理的数据流优先用async管道，零手动管理成本
2. 需要在组件类中手动订阅的场景，优先用takeUntil配合销毁Subject，或者统一管理Subscription实例在ngOnDestroy取消，两种都是官方认可的原生实现方案
3. 就算是HTTP请求这类自动完成的Observable，也建议统一加上取消逻辑，避免后续需求迭代把请求改成了长订阅后忘了加取消逻辑引发问题

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