Angular组件中Observable取消订阅时机及NgRx select自动处理疑问

一、Angular组件中何时取消订阅Observable？ #

• 如果你手动调用了subscribe()方法订阅Observable，且这个Observable不会自动触发complete或error（比如定时器interval、DOM事件流fromEvent、持续推送的自定义流），必须在组件销毁时手动取消订阅，防止内存泄漏。
• 无需手动取消的场景：
  • 使用Angular内置的async管道消费Observable（管道会自动在组件销毁时取消订阅）；
  • Observable会自动完成的情况（比如HttpClient发起的HTTP请求，请求结束后流会自动终止）。

二、NgRx select场景下的订阅处理 #

看你给出的代码：

export class FooComponent {
  data$: Observable<any>;

  ngOnInit(){
   data$ = this.store.select(selectData);
  }

  ngOnDestroy(){}
}

这种情况不需要手动调用unsubscribe()，前提是你在模板中用async管道来消费data$，比如：

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

async管道会自动管理订阅的生命周期，组件销毁时会自动取消订阅。

但如果是**手动调用subscribe()**来处理数据，比如：

ngOnInit(){
  this.store.select(selectData).subscribe(data => {
    this.localData = data;
  });
}

这种情况下就必须手动取消订阅，步骤如下：

1. 保存订阅对象到组件的Subscription变量中；
2. 在ngOnDestroy钩子中调用unsubscribe()：

export class FooComponent {
  localData: any;
  private dataSub!: Subscription;

  ngOnInit(){
   this.dataSub = this.store.select(selectData).subscribe(data => {
     this.localData = data;
   });
  }

  ngOnDestroy(){
    this.dataSub.unsubscribe();
  }
}

NgRx的store.select()返回的Observable是一个持续推送的流（只要store中的对应状态变化就会推送），不会自动完成，所以手动订阅后必须主动取消。

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