角度性能:DOM 事件会导致不必要的函数调用

Question

我有一个简单的页面，其中包含一个具有DOM事件(input)的输入元素。HTML 页面还调用一个函数，该函数仅通过控制台.log输出某些内容。现在，当我打开页面时，它会显示日志，但是当我在输入字段中键入某些内容时，每次键入内容时，它也会触发该功能。(实际上，当我输入一个字母时，它每次都会控制台.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()}}

Answer 1

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

在函数之前，任何大小写都是它返回的值。为了让 Angular 知道返回的值已经改变，Angular 必须运行它。

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

1. Angular：防止 DomSanizer 更新 DOM 事件

2. 角度性能：ngStyle 在每次点击随机输入时重新计算

3. 角度7，有大数据时反应式形式响应缓慢

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

---

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

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

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