angular - RXJS - Angular - 取消订阅主题

Question

如 this thread 中所述，通常在 Angular 5+ 中取消订阅 Observables 的“官方”解决方案是使用 takeUntil。到目前为止，一切都很好。我的问题是，如果我订阅的 Observable 实际上是一个 Subject，这是否也适用？

Answer 1

一旦您对任何内容(也包括主题)调用 .subscribe()，就需要一些东西来确保取消订阅。

处理有限的 Observables: 如果你订阅了一个有限的可观察对象(意味着一个具有有限/有限序列的可观察对象)，最后一条消息将发送一个结束信号并且订阅将自动取消。 这方面的例子是:

Observable.of(100)
Observable.from([1,2,3,4])

在有限可观察量中的例子是:

Observable.fromEvent(document, 'click')
Observable.timer(1000)

调用/管道 .first()、.take(number) 或 .takeWhile(在某些时候计算为 false 的条件) 或 takeUntil(observable that emits a value) 对一个 observable 都会将一个无限的 observable 变成一个有限的 observable。

停止调用 .subscribe(): 不必取消订阅的另一种流行方法是首先不订阅。这听起来可能很愚蠢，因为你什么时候想要一个你不订阅的可观察对象？好吧，如果您只需要将一些数据传递给您的 View /HTML 模板，将可观察到的管道传递到异步管道中会将取消订阅问题传递给异步管道本身。

HTML 模板中的典型示例:

<h1>Editing {{ infiniteObservable$ | async }}<h1>
<li *ngFor="let user of userObservable$ | async as users; index as i; first as isFirst">
   {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default</span>
</li>

手动取消订阅:最后，您可以选择保留对所有订阅的引用。您不必保留指向每个订阅的变量，只使用一个订阅对象来跟踪所有订阅，然后一次取消订阅所有订阅会更容易。 这是一个例子:

const subscriptions = new Subscription();
subscriptions.add(observable1$.subscribe());
subscriptions.add(observable2$.subscribe());
subscriptions.unsubscribe();

快速总结，如何处理退订，以下任一方法:

1. 将无限可观察量变成有限可观察量，从而消除取消订阅的需要(使用 .takeUntil(this.destroyed$) 并执行 this.destroyed$.next()在 ngOnDestroy() 中。
2. 避免订阅，并通过 async 管道传递 observable。
3. 保留对任何订阅的引用并在 ngOnDestroy() 方法中调用 .unsubscribe()。

我个人倾向于只使用前两种方法中的一种。