首页 / 技术问答 / Angular问答列表 / 问答详情

RxJS：takeUntil() Angular 组件的 ngOnDestroy()

tl;dr: Basically I want to marry Angular's 100 with the Rxjs 101 operator. -- is that possible?

我有一个Angular 组件，可以打开几个Rxjs订阅.

解决此问题的简单解决方案是:

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();
  }

}

这是可行的，但有点多余.我尤其不喜欢这样

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

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);
  }

}

是否有一个 destruct 事件或类似的事件可以让我使用takeUntil()或其他方式来简化组件架构？

推荐答案

你可以利用ReplaySubject来实现这一点:

EDIT:个不同于RxJS 6.x:

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及以上:

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();
  }
}

Angular相关问答推荐

RFDC.CommonJS或AMD依赖项可能会导致优化救助ANGURAL PROCEMENT with ngx-charts lib

将sass与@Use语句一起使用时出现Angular 新的VITE构建器编译错误

成Angular 的嵌套router-outlet

Angular 17+独立配置中main.ts bootstrap 调用的最佳实践

如何将 Firebase 云消息传递 (FCM) 与 Angular 15 结合使用？

使用Dragula时，ReactiveForm元素在拖动副本中显示不同的