html - Angular 性能 : DOM Event causes unnecessary function calls

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

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

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

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

1. Angular: Prevent DomSanizer from updating on DOM Events

2. Angular performance: ngStyle recalculates on each click on random input

3. Angular 7 ,Reactive Form slow response when has large data

您可能想通读这些主题以了解这里发生了什么以及如何解决此问题。

---

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

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

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