自习室.30 使用 takeUntil 操作符管理 Angular 组件的订阅

信使

共 1102字,需浏览 3分钟

 ·

2022-01-04 11:31

在上一篇文章中,有个知友评论说是要 takeUntil 来管理订阅更加清晰明了,那我们就探探究竟。

在 Rxjs 中,可以使用 takeUntil 来控制另外一个 Observable 对象数据的产生。使用 takeUntil,上游的数据直接转手给下游,直到takeUntil的参数吐出一个数据或者完结。

就像一个水龙头开关,一开始是打开的状态,上游的数据一开始直接流到下游,只要 takeUntil 一旦触发吐出数据,水龙头立刻关闭。

利用这点,可以在订阅时时,在管道中添加 takeUntil,在组件销毁时吐出数据,这样这些订阅就会立刻关闭,也就达到回收内存的作用。

改造之前:

export class ExampleComponent implements OnInit, OnDestroy {
  subscription1: Subscription;
  subscription2: Subscription;

  ngOnInit(): void {
    this.subscription1 = observable1.subscribe(...);
    this.subscription2 = observable2.subscribe(...);
  }

  ngOnDestroy() {
    this.subscription1.unsubscribe();
    this.subscription2.unsubscribe();
  }
}

改造之后:

export class ExampleComponent implements OnInit, OnDestroy {
  destroy$: Subject<boolean> = new Subject<boolean>();

  ngOnInit(): void {
    observable1
      .pipe(takeUntil(this.destroy$))
      .subscribe(...);
    observable2
      .pipe(takeUntil(this.destroy$))
      .subscribe(...);
  }

  ngOnDestroy() {
    this.destroy$.next(true);
    this.destroy$.unsubscribe();
  }
}

总结

对比下来,你会发现takeUntil操作符会清晰简洁很多,你只需要把takeUntil(this.destroy$)加入到想要组件销毁时停止订阅的管道,即可统一管理,感谢这位知友提供的思路。

浏览 22
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报