自习室.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$)
加入到想要组件销毁时停止订阅的管道,即可统一管理,感谢这位知友提供的思路。
评论
Angular InstantSearch功能强大的 Angular 版前端搜索组件
Angular InstantSearch 是 Algolia 发布的 Angular 专用版搜索组
Angular InstantSearch功能强大的 Angular 版前端搜索组件
0
Angular InstantSearch功能强大的 Angular 版前端搜索组件
AngularInstantSearch 是 Algolia 发布的 Angular 专用版搜索组件。核心特性兼容Angular4和5,不兼容Angular1和220个开箱即用的组件<Decla
Angular InstantSearch功能强大的 Angular 版前端搜索组件
0
NG-ZORROAnt Design 的 Angular 组件库
ng-zorro-antd 是 Ant Design 的 Angular 实现,主要用于研发企业级中
NG-ZORROAnt Design 的 Angular 组件库
0
NG-ZORROAnt Design 的 Angular 组件库
ng-zorro-antd 是AntDesign的Angular实现,主要用于研发企业级中后台产品。全部代码开源并遵循MIT协议,任何企业、组织及个人均可免费使用。✨ 特性提炼自企业级中后台产品的交互
NG-ZORROAnt Design 的 Angular 组件库
0
PrimeNG强大的 Angular UI 组件库
PrimeNG是一个极为完善的开源AngularUI组件库。特性:原生小部件丰富,内置70多个易于使用的组件,可满足所有 UI需求主题丰富,可利用SCSS快速定制自己的皮肤高度可定制的原生Angula
PrimeNG强大的 Angular UI 组件库
0
canalBinlog 的增量订阅和消费组件
canal是阿里巴巴MySQL数据库Binlog的增量订阅&消费组件。名称:canal[kə'næl]译意:水道/管道/沟渠语言:纯java开发定位:基于数据库增量日志解析
canalBinlog 的增量订阅和消费组件
0