angular - 在模板中使用函数时如何停止角度函数的多次触发？

Question

我在 HTML 模板中使用函数，我不能直接使用变量，因为条件不太复杂。

我的问题是模板中的函数被多次调用。

例如这个 Stackblitz （最小的，可重现的例子）

加载时记录get Name was called4 次，单击更改版本按钮后再记录 2 次。

我想在加载时调用一次，每次点击只调用一次。为了性能，我怎样才能做到这一点

Answer 1

将changeDetection组件的模式设置为OnPush

https://angular.io/api/core/ChangeDetectionStrategy

Using将告诉 Angular 仅在组件的绑定发生更改OnPush时才呈现模板。@Input()默认模式将在每个摘要循环中对模板执行更改检测，并且由于表达式正在使用函数，因此每次都必须调用它以查看值是否已更改。

@Component({
  selector: 'hello',
  template: `<h1>Hello {{getName()}}!</h1>
  <button (click)="changeName()"> this</button>`,
  styles: [`h1 { font-family: Lato; }`],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HelloComponent implements OnInit{
   // ....
}

这是有关该主题的博客：

https://netbasal.com/a-comprehensive-guide-to-angular-onpush-change-detection-strategy-5bac493074a4