从角度模板多次调用方法

Posted 2023-03-13

【中文标题】从角度模板多次调用方法

【英文标题】：Multiple times method calling from angular template

【发布时间】：2021-02-06 11:10:03

【问题描述】：

我正在使用模板中的方法来调用函数，该函数返回 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() 在导航时有时不会被触发，这就是我从模板调用此方法的原因。

【问题讨论】：

我没有看到 Observable check$ 和其余代码的任何连接。 checkboolObs 不是可观察的

@MoxxiManagarm 请立即查看

仍然，您在checkBoolObs 上使用异步管道，它返回boolean 而不是Observable<boolean>。我不明白check$ 是如何参与其中的。另外也许这篇文章会帮助你medium.com/showpad-engineering/…

【参考方案1】：

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

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

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

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

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

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

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

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

【参考方案2】：

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

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

在这里，您将仅在可观察对象返回时评估 check，并且在 async as 管道的帮助下，check 不会评估为 false