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

Question

我有一个带有 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()}}输入的东西到输入字段时，不应该叫

Answer 1

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

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

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

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

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

3. Angular 7 ，Reactive Form 有大数据时响应慢

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

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

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

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