从 angular 模板多次调用方法

Question

我在模板中使用方法来调用函数，即 returns boolean 值。问题是该函数被调用了 6 次以上。之后我使用 changeDetectionStrategy.onPush 将调用次数减少到 2 次。下面是我的代码

HTML

<div *ngIf="(checkboolObs(check$)) | async"></div>

TS

check$: Observable<service> = this.data.getresponse();

ngOnInit() {
  this.checkboolObs();
}
checkboolObs(style):boolean {
  return somestyleIDS.includes(style.component)
}

如果找到值 returns true，但它被调用了几次，我只需要调用它一次。这背后的原因是因为 checkboolobs() 在导航时有时不会被触发，这就是我从模板调用此方法的原因。

Answer 1

这是正常的，因为每次调用 change-detection 循环时，它都会评估模板，而您的函数是其中的一部分，因此该函数将 re-evaluated（再次调用）。

Angular

中更改检测如何工作的简要说明

想象一下，每次有一个事件，可能会导致任何变化（例如点击，一些时间间隔正在做某事，ajax 调用）Angular 获取模板并 re-evaluates 它为您开箱即用（换句话说更新 HTML）。

当您使用 onPush 策略时，您基本上是在告诉 angular 停止侦听任何提到的更改，因为您将负责在发生更改时通知框架. ** 免责声明我们有可以在模板中使用的 | async，它可以很好地与 onPush 策略一起工作，如果您的输入通过引用更改更改检测将被触发，但正如我所说，这是一个简要说明。

所以你可以做的是（我假设你是从 check$ observable 中获取 ID）

myCheck$ = this.check$.pipe(map(arrayOfIds => arrayOfIds.includes(style.component)))

然后在模板中使用 myCheck$ 和 |async。

如果这不起作用，请更详细地解释您的用例。

Answer 2

另一个适用于您的打字稿代码的仅模板替代方案：

<ng-container *ngIf="check$ | async as check">
  <div *ngIf="checkboolObs(check))">...</div>
</ng-container>

这里你只会评估 check 当可观察的 returns 并且 check 在 async as 的帮助下不评估为 false管道

从 angular 模板多次调用方法

Multiple times method calling from angular template

rxjs

typescript

angular

rxjs-observables

angular9