时间戳

首页 > 解决方案 > 我可以通过以下方式订阅 RXJS observable 吗？

angular - 我可以通过以下方式订阅 RXJS observable 吗？

问题描述

在我的 Angular 组件中，我想订阅很多选择器，为了减少样板，我尝试通过以下方式订阅：

this.store.select(selectFilloutId)
          .subscribe(filloutId => this.filloutId=filloutId);

它似乎按照我想要的方式工作，filloutId我的组件中的值得到了正确的值，但我不完全确定没有我看不到的不需要的副作用。

我的问题是：这是一个好方法，还是我应该完全避免这种情况？

提前致谢！

标签： angularrxjsngrxsubscription

解决方案

只要您在某个时候取消订阅，该方法就没有任何问题。如果您不取消订阅，一个不想要的副作用是，在您完成订阅后，您将拥有旧订阅。这最终可能导致内存泄漏。

如果您使用从该特定选择器返回的值在模板中显示某些内容，我会在模板中订阅它。这将为您管理订阅生命周期，我认为这比手动订阅要好。如果我能够避免它，我宁愿不手动订阅。

<ng-container *ngIf="fillOutId$ | async; let fillOutId"></ng-container>

如果您依赖fillOutId$执行其他异步操作，我会使用管道。例如，如果您想获取基于以下内容的列表fillOutId$：

list$ = this.fillOutId$.pipe(
// map, switchMap, whatever you need to do here
)

然后，在模板中订阅这个：

<ng-container *ngFor="let item of list$ | async; let item">
   <a-component-with-list-item-as-input 
      [item]="item"
   ></a-component-with-list-item-as-input>
</ng-container>

顺便说一句，ngrx有一个名为的库@ngrx/component，它可以让您将上述内容编写为：

<ng-container *ngrxLet="fillOutId$; let fillOutId"></ng-container>

这将让您订阅 observable，但如果该值是虚假的，则不会阻止渲染。

推荐阅读