在 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 中找到很好的参考资料，以深入了解更改检测机制的内部结构，并在 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()" .... >