时间戳

首页 > 解决方案 > 从角度模板多次调用方法

angular - 从角度模板多次调用方法

问题描述

我在模板中使用方法来调用返回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)
}

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

标签： angulartypescriptrxjsangular9rxjs-observables

解决方案

这是正常的，因为每次调用更改检测周期时，它都会评估模板并且您的函数是其中的一部分，因此将重新评估该函数（再次调用）。

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

想象一下，每次发生事件时，可能会导致任何变化（例如点击、某些时间间隔正在做某事、ajax 调用） HTML）。

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

所以你可以做的事情是（我假设你从check$可观察到的 ids）

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

然后myCheck$在您的模板中使用|async.

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

推荐阅读