Question

我仍然习惯于Angular的变更检测实现，并且不清楚在模板中调用函数是否会导致性能问题。

例如，执行以下操作是否更糟：

<mat-tab-group>
  <mat-tab label="First"> {{ getFirstTab() }} </mat-tab>
  <mat-tab label="Second"> {{ getSecondTab() }} </mat-tab>
</mat-tab-group>

比做：

<mat-tab-group>
  <mat-tab label="First"> {{ firstTabContent }}</mat-tab>
  <mat-tab label="Second"> {{ secondTabContent }}</mat-tab>
</mat-tab-group>

那又怎么样：

<button *ngIf="shouldShowButton()" .... >

Answer 1

它确实可以：当您使用变量时，更改检测会监视该变量，并且仅在此变量更改时才会触发更新机制。

使用诸如方法调用之类的更为复杂的方法时，除了在每个变更检测周期和更新时评估表达式之外，别无他法。

因此，始终可以保证与变量相比，与函数调用相比，它们具有相同或更好的性能。这完全取决于您的变量变化与变化检测周期数相比有多少变化。

您可以在this blog post中找到很好的参考资料，以深入研究变更检测机制的内部内容，并在您的特定问题上找到here a discussion with examples。

在@ enno.void评论后编辑：

在许多情况下，您可以改用自定义管道，示例为on this page。

Answer 2

第一个方法是可能的，只要您正在调用字符串...并且该函数应在mat-tab内，如下所示：

<mat-tab-group>
  <mat-tab label="First" {{ getFirstTab() }}> </mat-tab>
  <mat-tab label="Second" {{ getSecondTab() }}> </mat-tab>
</mat-tab-group>

我不认为最后一个甚至都无法工作...在* ngIf中调用一个函数会出错

<button *ngIf="shouldShowButton()" .... >

模板中的调用函数是否会导致Angular2 +中的性能问题？

2 个答案: