RXJS-Angular-退订主题 [英] RXJS - Angular - unsubscribe from Subjects

问题描述

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

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?

推荐答案

一旦您在任何对象上调用了.subscribe()(主题也是如此)，则需要确保订阅已取消订阅.

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

处理有限的Observables : 如果您订阅有限的可观察对象(即具有有限/有限序列的可观察对象)，则最后一条消息将发送结束信号，并且该订阅将自动取消. 例如:

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)

在一个可观察对象上调用/管道.first()，.take(number)或.takeWhile(condition that will evaluate to false at some point)或takeUntil(observable that emits a value)都会将原本无限的可观察对象变成有限的一个.

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.

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

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.

html模板中的典型示例:

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>

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

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. 将无限的可观测量变成有限的可观测量，从而消除了取消订阅的需要(使用.takeUntil(this.destroyed$)并在ngOnDestroy()中执行this.destroyed$.emit()).
2. 避免订阅，并通过async管道传递可观察对象.
3. 保留对所有订阅的引用，并在ngOnDestroy()方法中调用.unsubscribe().

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