将 takeUntil rxjs 运算符移动到单独的方法答案

【问题标题】：Move takeUntil rxjs operator to separate method将 takeUntil rxjs 运算符移动到单独的方法
【发布时间】：2021-02-08 03:44:37
【问题描述】：

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

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

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

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

有什么想法吗？

【问题讨论】：

【解决方案1】：

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

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

在您的 ts 文件中

data$ = this.myService.loadData()

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

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

</ng-container>

通过上述方式，Angular 将处理订阅，您的代码既易于阅读、测试和调试

【讨论】：

【解决方案2】：

是的。你当然可以像你说的那样抽象出来。

但是，以下已经为我们退订：

此外，从角度来看，最好在ngOnDestroy 上取消订阅，因为这是组件生命周期结束的时候。并不是说您没有计划这样做，但它可能会使您的抽象变得更加复杂。需要考虑的事情。

例如，您仍然必须存储您的订阅（在组件中，因为服务不会使用ngOnDestroy）然后使用您的抽象取消订阅，这违背了抽象的目的，因为您仍然必须添加一些样板代码。

简而言之，抽象对于服务来说是个好主意，但对于组件来说，它要复杂得多，我会尝试使用异步管道和本地取消订阅作为首选方法。

【讨论】：