Question

我有一个简单的页面，其中包含具有DOM事件（输入）的input元素。 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将不得不运行它。

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

您可能想通读这些主题，以了解此处的情况以及如何解决此问题。

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

）调用方法

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

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

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

预期的行为：

1 个答案: