时间戳

首页 > 解决方案 > 将 takeUntil rxjs 运算符移动到单独的方法

angular - 将 takeUntil rxjs 运算符移动到单独的方法

问题描述

我BaseComponent在我的 Angular 应用程序中有类，它实现destroy$: Subject<void>了 observables。每次我订阅服务时，我都在做：

this.myService.loadData()
    .pipe(takeUntil(this.destroy$))
    .subscribe(data => this.userData = data);

我想避免.pipe(takeUntil(this.destroy$))到处写，我想知道，有没有办法为 observable 创建扩展方法并takeUntil在那里处理？例如移动.pipe(takeUntil(this.destroy$))到我的自定义方法ifAlive并使其看起来像这样：

this.myService.loadData()
    .isAlive()
    .subscribe(...);

有任何想法吗？

标签： angulartypescriptrxjsobservableextension-methods

解决方案

我相信你正在寻找的是一个async管道。基本上，您允许 Angular 为您进行订阅和取消订阅

您只需将生成的 observable 分配给变量

在你的ts文件中

data$ = this.myService.loadData()

并在您的html中简单地包装您的内容*ngIf='data$ | async as data'

<ng-container *ngIf='data$ | async as data'>

</ng-container>

有了以上内容，Angular 将处理订阅，您的代码既易于阅读、测试和调试

推荐阅读