Angular 性能：DOM 事件导致不必要的函数调用答案

【问题标题】：Angular Performance: DOM Event causes unnecessary function callsAngular 性能：DOM 事件导致不必要的函数调用
【发布时间】：2019-11-25 21:41:12
【问题描述】：

我有一个简单的页面，其中包含一个具有 DOM 事件（输入）的输入元素。 HTML 页面还调用了一个函数，该函数仅通过 console.log 输出一些内容。现在当我打开页面时，它会显示日志，但是当我在输入字段中输入内容时，每次输入内容都会触发该功能..（实际上，当我输入字母时，它会 console.logs每次两次）

为什么会这样？如何预防？我读了一些关于changeDetection 的东西，但还有其他解决方案吗？

HTML：

{{test()}}

<input class="input-msg" [value]="textValue" (input)="textValue = $event.target.value;">

.ts:

export class TestComponent implements OnInit {

  constructor() { 
  }

  test() {
    console.log('test message');
  }
}

预期行为：

在输入字段中输入内容时不应调用{{test()}}

【问题讨论】：

如果要在组件初始化时调用test，不可以从ngOnInit()调用吗？当你想调用test()
@PareshLomate 这只是演示该行为的示例。在我的真实项目中，我有一个 *ngFor，它调用一个函数来加载图像。当我在输入字段中输入内容时，它会在每个字母输入时加载图像。
“它也会在我每次输入内容时触发该功能” - 也许您应该使用 debounceTime？文档在这里：learnrxjs.io/operators/filtering/debouncetime.html
您可以在 ngoninit 中调用测试并将结果存储在本地属性中，然后简单地显示此属性而不是函数或创建组件以使用 onpush changedetection 加载图像。它的输入可以是url。

标签： html angular performance

【解决方案1】：

由于您使用其中一种数据绑定语法调用函数，因此每当 Angular 执行变更检测时，它都会调用此方法。

对于函数之前，任何情况都是它返回的值。为了让 Angular 知道返回的值已经改变，Angular 必须运行它。

这与人们在这里提出的几个问题完全相同：

您可能需要通读这些主题以了解此处发生的情况以及如何解决此问题。

解决方案基本上是以这样一种方式设计您的实现，即它永远不会以一种数据绑定语法调用方法，即

在字符串插值中 - {{ methodCall() }}
在属性绑定中 - [propertyName]="methodCall()"
在属性绑定中 - [class.className]="methodCall()" / [style.style-name]="methodCall()"

另一种解决方案是将此代码移动到子组件并将该子组件上的changeDetectionStrategy 配置为ChangeDetectionStrategy.OnPush

【讨论】：