在模板中调用函数会导致 Angular 2 出现性能问题吗？

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 to dive in the change detection mechanism internals, and 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()" .... >

在模板中调用函数会导致 Angular 2 出现性能问题吗？

Does calling functions in templates cause performance issues in Angular2+?

angular2-template

angular