首页 文章

RXJS - Angular - 取消订阅主题

提问于
浏览
4

this thread中所述,'official'解决方案取消订阅Angular 5中的Observable一般使用takeUntil . 到现在为止还挺好 . 我的问题是,如果我订阅的Observable实际上是一个主题,这是否也适用?

1 回答

  • 3

    一旦你在任何事情上调用 .subscribe() (主题也是如此),需要确保订阅被取消订阅 .

    Dealing with finite Observables :如果您订阅了有限可观测量(意味着具有有限/有限序列的可观测量),则最后一条消息将发送结束信号,并且订阅将自动取消 . 这方面的例子是:

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

    无限可观测量的例子是:

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

    在一个可观测量上调用/管道 .first().take(number).takeWhile(condition that will evaluate to false at some point) 将会将无限的可观测量转变为有限的可观测量 .

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

    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>
    

    Manually unsubscribing :最后,您可以选择保留对所有订阅的引用 . 您不仅可以更轻松地使用单个Subscription对象来跟踪所有订阅,然后立即取消订阅所有订阅 . 这是一个例子:

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

    Quick summerize ,如何处理取消订阅,以下任何一种方法:

    • 将无限可观测量转换为有限值,因此无需取消订阅(在 ngOnDestroy() 中使用 .takeWhile(() => this.alive) 并将生命翻转为false) .

    • 避免订阅,并通过 async 管道传递observable .

    • 保留对任何订阅的引用,并在 ngOnDestroy() 方法中调用 .unsubscribe() .

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

相关问题