时间戳

首页 > 解决方案 > 使用异步管道时如何执行业务逻辑？

angular - 使用异步管道时如何执行业务逻辑？

问题描述

我一直在使用异步管道进行直接绑定，例如：

组件.ts：

uiData$ = this.someService.uiData$;

HTML：

<ng-container *ngIf="uiData$ | async as holdingData">

最近业务逻辑发生了一些变化，我需要对这个管道返回的数据进行一些检查。所以我想这样做：

<ng-container *ngIf="uiData$ | async as holdingData">
            {{ storeHoldingData(holdingData) }}

后面的代码：

storeHoldingData(holdingData: HoldingsData): void {
    this.holdingData = holdingData;
    this.doSomething();
  }

这让我改变了检测相关的问题，所以我想知道这是否是一个很好的途径，或者我将跳回传统的 ngOnit() 模式订阅。

我可以开始，changeDetection: ChangeDetectionStrategy.OnPush然后声明 BheaviorSubjects 以传播更改。

新的业务逻辑还为页面上的 Tab 控件中的 Tabs 做出了一些隐藏/显示决策。

在坚持使用异步管道的同时，有没有更好的方法来处理这种变化？

标签： angularrxjsobservablereactive-programmingbehaviorsubject

解决方案

我同意这些评论：这是一种不好的做法。在模板内部调用的函数会受到重创，是性能的噩梦。

也就是说，您应该始终努力changeDetection: ChangeDetectionStrategy.OnPush，而async烟斗是您在此任务中的朋友。

至于你应该怎么做？这实际上取决于doSomething()方法中发生了什么。使用tap运算符绝对是一种选择，并且专门针对副作用。另一个选项放在shareReplay(1)该可观察流的末尾。吨

uiData$ = this.someService.uiData$.pipe(shareReplay(1))

从那里，只需在您需要的任何其他地方重复使用相同的 observable，它就不会进行另一个服务调用。你甚至可以调用 subscribe 来订阅它ngOnInit。

推荐阅读