RxJS:takeUntil() Angular 组件的 ngOnDestroy() [英] RxJS: takeUntil() Angular component's ngOnDestroy()

问题描述

tl;dr:基本上我想将 Angular 的 ngOnDestroy 与 Rxjs takeUntil() 运算符结合起来.-- 这可能吗?

tl;dr: Basically I want to marry Angular's ngOnDestroy with the Rxjs takeUntil() operator. -- is that possible?

我有一个 Angular 组件，可以打开多个 Rxjs 订阅.这些需要在组件销毁时关闭.

I have an Angular component that opens several Rxjs subscriptions. These need to be closed when the component is destroyed.

一个简单的解决方案是:

A simple solution for this would be:

class myComponent {

  private subscriptionA;
  private subscriptionB;
  private subscriptionC;

  constructor(
    private serviceA: ServiceA,
    private serviceB: ServiceB,
    private serviceC: ServiceC) {}

  ngOnInit() {
    this.subscriptionA = this.serviceA.subscribe(...);
    this.subscriptionB = this.serviceB.subscribe(...);
    this.subscriptionC = this.serviceC.subscribe(...);
  }

  ngOnDestroy() {
    this.subscriptionA.unsubscribe();
    this.subscriptionB.unsubscribe();
    this.subscriptionC.unsubscribe();
  }

}

这行得通，但有点多余.我特别不喜欢那样- unsubscribe() 在别处，所以你必须记住它们是链接的.- 组件状态被订阅污染.

This works, but it's a bit redundant. I especially don't like that - The unsubscribe() is somewhere else, so you gotta remember that these are linked. - The component state is polluted with the subscription.

我更喜欢使用 takeUntil() 运算符或类似的东西，使它看起来像这样:

I would much prefer using the takeUntil() operator or something similar, to make it look like this:

class myComponent {

  constructor(
    private serviceA: ServiceA,
    private serviceB: ServiceB,
    private serviceC: ServiceC) {}

  ngOnInit() {
    const destroy = Observable.fromEvent(???).first();
    this.subscriptionA = this.serviceA.subscribe(...).takeUntil(destroy);
    this.subscriptionB = this.serviceB.subscribe(...).takeUntil(destroy);
    this.subscriptionC = this.serviceC.subscribe(...).takeUntil(destroy);
  }

}

是否有销毁事件或类似的东西可以让我使用 takeUntil() 或其他方式来简化组件架构?我意识到我可以在构造函数中自己创建一个事件或在 ngOnDestroy() 中触发的东西，但这最终不会使事情变得更容易阅读.

Is there a destroy event or something similar that would let me use takeUntil() or another way to simplify the component architecture like that? I realize I could create an event myself in the constructor or something that gets triggered within ngOnDestroy() but that would in the end not make things that much simpler to read.

推荐答案

您可以利用 ReplaySubject 来实现:

You could leverage a ReplaySubject for that:

与 RxJS 6.x 不同:注意 pipe() 方法的使用.

Different since RxJS 6.x: Note the use of the pipe() method.

class myComponent {
  private destroyed$: ReplaySubject<boolean> = new ReplaySubject(1);

  constructor(
    private serviceA: ServiceA,
    private serviceB: ServiceB,
    private serviceC: ServiceC) {}

  ngOnInit() {
    this.serviceA
      .pipe(takeUntil(this.destroyed$))
      .subscribe(...);
    this.serviceB
      .pipe(takeUntil(this.destroyed$))
      .subscribe(...);
    this.serviceC
      .pipe(takeUntil(this.destroyed$))
      .subscribe(...);
  }

  ngOnDestroy() {
    this.destroyed$.next(true);
    this.destroyed$.complete();
  }
}

这仅对 RxJS 5.x 及更早版本有效:

This is only valid for RxJS 5.x and older:

class myComponentOld {
  private destroyed$: ReplaySubject<boolean> = new ReplaySubject(1);

  constructor(private serviceA: ServiceA) {}

  ngOnInit() {
    this.serviceA
      .takeUntil(this.destroyed$)
      .subscribe(...);
  }

  ngOnDestroy() {
    this.destroyed$.next(true);
    this.destroyed$.complete();
  }
}

这篇关于RxJS:takeUntil() Angular 组件的 ngOnDestroy()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！