Angular组件自建Subscription是否需要手动取消订阅？

结论先行：Angular不会自动销毁这个Subscription，你得手动处理！ #

咱们先看你给出的示例代码：

@Component({ 
  selector: 'some-chart', 
  template: '<div></div>', 
}) 
class ChartingThing implements OnInit { 
  mySubscription: Subscription = new Subscription(); 
  ngOnInit() { 
    this.mySubscription.subscribe((blah) => { 
      console.log(blah); 
    }); 
  } 
}

当Angular清理这个组件时，不会自动帮你调用unsubscribe()，原因主要有两点：

• 组件实例被销毁后，虽然会被标记为垃圾回收，但Subscription持有的回调函数（比如示例里的console.log(blah)）可能还会引用组件的上下文（比如this），这会导致内存泄漏——组件实例没法被正常回收，因为订阅还攥着它的引用。
• 如果你的组件用了缓存机制（比如Angular Router的RouteReuseStrategy），组件实例根本不会被销毁，这时候重复创建订阅却不取消，会导致多个订阅同时生效，触发多次回调，问题会更明显。

和服务订阅的区别 #

你提到的那篇Stack Overflow提问，讨论的是注入服务的订阅——服务是单例，不会随组件销毁而消失，所以订阅会一直挂着；而咱们这里说的是组件自身创建的Subject对应的订阅，虽然组件会销毁，但订阅本身不会自动终止，本质上都需要手动管理，只是场景不同而已。

正确的处理方式 #

最直接的就是在ngOnDestroy钩子中手动取消订阅，修改后的代码如下：

@Component({ 
  selector: 'some-chart', 
  template: '<div></div>', 
}) 
class ChartingThing implements OnInit, OnDestroy { 
  mySubscription: Subscription = new Subscription(); 
  ngOnInit() { 
    this.mySubscription.subscribe((blah) => { 
      console.log(blah); 
    }); 
  }

  ngOnDestroy() {
    // 手动取消订阅，释放资源
    this.mySubscription.unsubscribe();
  }
}

如果有多个订阅，更优雅的方式是用一个Subscription容器统一管理，一次性取消所有：

@Component({ 
  selector: 'some-chart', 
  template: '<div></div>', 
}) 
class ChartingThing implements OnInit, OnDestroy { 
  private subscriptions = new Subscription();

  ngOnInit() {
    const sub1 = someObservable.subscribe(...);
    const sub2 = anotherObservable.subscribe(...);
    // 把多个订阅添加到容器
    this.subscriptions.add(sub1);
    this.subscriptions.add(sub2);
  }

  ngOnDestroy() {
    // 一次性取消所有订阅
    this.subscriptions.unsubscribe();
  }
}

另外还有个偷懒的好办法：用Angular的async管道，它会自动在组件销毁时帮你取消订阅，比如在模板里这么写：

<div>{{ myObservable$ | async }}</div>

这样就不用手动写unsubscribe()了，省心又安全。

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