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

Question

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

component.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传播更改。

新的业务逻辑还对页面上的“选项卡中的选项卡”中的“选项卡”做出了一些“隐藏/显示”决定。

在坚持使用异步管道的同时，是否有更好的方法来处理此类更改？

Answer 1

我同意以下评论：这是一种不良做法。模板内部调用的功能会受到重创，成为性能的噩梦。

也就是说，您应该始终争取changeDetection: ChangeDetectionStrategy.OnPush，async管道是您在此任务中的朋友。

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

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

从那里，只需在您需要的其他任何地方重复使用相同的可观察对象，就不会再调用其他服务。您甚至可以在ngOnInit中呼叫订阅。

Answer 2

如果要执行任何检查或使用可观察对象返回的数据来执行某些副作用，请尝试使用tap运算符。

uiData$ = this.someService.uiData$.pipe(
             tap(res => this.doSomething(res))
         )

如上面的评论中所述，请不要在模板内调用方法，因为这被认为是不良做法。