在模板中使用功能时，如何停止角度功能的多重触发？

Question

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

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

例如this Stackblitz （最小的可复制示例）

get Name was called加载4次，单击“更改版本”按钮后登录2次。

我希望在加载时调用一次，每次点击仅调用一次。出于性能考虑，我该如何实现

Answer 1

将组件的changeDetection模式设置为OnPush

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

使用OnPush将通知Angular仅在组件的@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