Angular RxJS - 取消订阅 mergeMap？

Question

遵循 Stack Overflow 帖子中描述的最佳实践:Angular RxJS When Should I Unsubscribe From Subscription ，考虑这个 Angular 组件生命周期钩子(Hook):

private ngUnsubscribe: Subject<void> = new Subject();

ngOnInit() {
  this.fireAuth.authState
    .takeUntil(this.ngUnsubscribe)
    .mergeMap((user) => this.todoService.getUserTodos(user.uid))
    .takeUntil(this.ngUnsubscribe)
    .subscribe((todos) => this.userTodoArray = todos);
}

ngOnDestroy() {
  this.ngUnsubscribe.next();
  this.ngUnsubscribe.complete();
}

如 authState()和 mergeMap()两者都返回 Observables，我想我应该要么

取消订阅它们(如上所示)或

只拨打 takeUntil() 中的一个操作符，或者来自外部 Observable authState()或内部 Observable this.todoService.getUserTodos(user.uid) .

哪种方法可以确保在组件销毁后取消订阅所有 Observable 是正确的？

Answer 1

您不需要这两个 takeUntil运营商。您只需要一个，但行为会因您删除的一个而有所不同。

如果您只使用第一个 takeUntil ， 像这样:

this.fireAuth.authState
  .takeUntil(this.ngUnsubscribe)
  .mergeMap((user) => this.todoService.getUserTodos(user.uid))
  .subscribe((todos) => this.userTodoArray = todos);

当 this.ngUnsubscribe发出 next通知， takeUntil将退订 this.fireAuth.authState源并将完成。如 Observable Contract 中所述，当一个 observable 完成时，它的订阅者会收到一个 complete通知并自动取消订阅。

但是，如果 next通知是从 this.fireAuth.authState 发出的以及由 getUserTodos 返回的 observable在 mergeMap还没有完成， mergeMap实现不会取消订阅 getUserTodos可观察的。如果 getUserTodos observable 稍后会发出 next通知，通知将流经 subscribe .

如果您只使用第二个 takeUntil ， 像这样:

this.fireAuth.authState
  .mergeMap((user) => this.todoService.getUserTodos(user.uid))
  .takeUntil(this.ngUnsubscribe)
  .subscribe((todos) => this.userTodoArray = todos);

当 this.ngUnsubscribe发出 next通知， takeUntil将退订 mergeMap ，这将取消订阅 this.fireAuth.authState以及任何返回的 getUserTodos可观察的。

所以，在 this.ngUnsubscribe 之后发出，没有通知会流到 subscribe .这很可能是您正在寻找的行为，因此您应该删除第一个 takeUntil运算符(operator)。