RXJS - Angular - 取消订阅主题 [英] RXJS - Angular - unsubscribe from Subjects

问题描述

如此主题中所述，官方"在 Angular 5+ 中取消订阅 Observables 的解决方案通常是使用 takeUntil.到现在为止还挺好.我的问题是，如果我订阅的 Observable 实际上是一个主题，这也适用吗?

解决方案

一旦你对任何东西(Subjects 也是)调用 .subscribe() ，需要确保订阅被取消订阅..subscribe()>

处理有限的 Observable:如果订阅了一个有限的 observable(意味着一个具有有限/有限序列的 observable)，最后一条消息将发送结束信号，订阅将自动取消.例如:

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

in有限可观察的例子是:

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

调用/管道 .first(), .take(number) 或 .takeWhile(在某些时候评估为假的条件) 或 takeUntil(observable that发出一个值) 在一个 observable 上都会把一个原本无限的 observable 变成一个有限的.

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

html 模板中的典型示例:

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

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

const subscriptions = new Subscription();subscriptions.add(observable1$.subscribe());subscriptions.add(observable2$.subscribe());订阅.取消订阅()；

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

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

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

As described in this thread, 'official' solution to unsubscribe from Observables in Angular 5+ in general is using takeUntil. So far, so good. My question is, does this also apply if the Observable I am subscribed to is actually a Subject?

解决方案

Once you call .subscribe() on anything (Subjects too), something needs to make sure the subscription gets unsubscribed.

Dealing with finite Observables: If you subscribe to a finite observable (meaning an observable that has a finite/limited sequence), the last message will send an end signal and the subscription will be canceled automatically. Examples of this are:

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

Examples of infinite observables are:

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

Calling/piping .first(), .take(number) or .takeWhile(condition that will evaluate to false at some point) or takeUntil(observable that emits a value) on an observable will all turn an otherwise infinite observable into a finite one.

Stop calling .subscribe(): Another popular method of not having to unsubscribe is by not subscribing in the first place. This might sound stupid, since when would you want an observable that you do not subscribe to? Well if you only need to pass some data to your view/html template, piping that observable into the async pipe will pass the unsubscribing issue to the async pipe itself.

Typical examples in the html template:

<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>

Manually unsubscribing: Lastly, you can choose to keep references to all subscriptions. You don't have to keep a variable pointing to each subscription, it's easier to just use a single Subscription object to keep track of all the subscriptions, and then unsubscribe to all of them at once. Here is an example:

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

Quick summerize, how to handle unsubscriptions, any of the below methods:

1. Turn infinite observables into finite ones, hereby removing the need to unsubscribe (use .takeUntil(this.destroyed$) and do this.destroyed$.emit() in ngOnDestroy()).
2. Avoid subscribing, and passing the observable though the async pipe.
3. Keep a reference to any subscriptions and call .unsubscribe() in the ngOnDestroy() method.

Personally i tend to only use one of the two first methods.

这篇关于RXJS - Angular - 取消订阅主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！