模板中的调用函数是否会导致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()" .... >