我应该取消订阅根 Angular 组件中的 observables 吗?

sla*_*sky 8 observable rxjs typescript angular

我有我的根(自举)角(6.x的)组件可观察到的,AppComponent
通常,我会在使用生命周期钩子调用 destroy() 时取消订阅任何打开的订阅ngOnDestroy
由于 AppComponent 是应用程序的根,因此永远不会被销毁(除非整个应用程序被销毁),我是否仍然需要实现 ngOnDestroy 并且我是否需要为取消订阅而烦恼?

我一直无法找到这个看似常见的确切场景的答案。

例子:

export class AppComponent implements OnInit, OnDestroy {
  private tokenSubscription: Subscription;
  constructor(private dataSvc: DataService) { }
  ngOnInit() {
    this.tokenSubscription = this.dataSvc.myObservable.subscribe((val) => {
      // do stuff
    });
  }
  ngOnDestroy() {
    this.tokenSubscription.unsubscribe(); // Do I need this in root component?
  }
}
Run Code Online (Sandbox Code Playgroud)

谢谢!

Chr*_*ert 5

AppComponent.ngOnInit() 中的一次性订阅是可以的

Angular 中的 RXJS 订阅AppComponent不需要取消订阅,只要不重复创建新订阅即可。例如,如果订阅是一次性创建ngOnInit的,那就没问题。AppComponent

根中提供的 Angular 服务最好是单例服务

对于在根组件中创建的 Angular 服务,最好使用单例服务来确保应用程序中仅存在一个实例。

最佳实践

虽然根组件中存在未取消订阅的订阅通常是可以的,但建议遵循管理订阅的最佳实践。

  • take(1)- 对于在应用程序启动期间仅发生一次的take(1)订阅,请使用 RXJS运算符,它具有自动取消订阅的优点。
  • asyncPipe - 在后台处理 RXJS 订阅并自动取消订阅。

使用示例take(1)

constructor(private dataSvc: DataService) { }

ngOnInit() {
  this.dataSvc.myObservable.pipe(take(1)).subscribe((val) => {
    // do stuff
  });
}
Run Code Online (Sandbox Code Playgroud)

查看在 Angular 应用程序中取消订阅 RxJS Observables 的最佳方法!