为什么角度绑定运行4次？

Question

应用程序。组成部分ts

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;

  str = () => {
    console.log('123123');
  };
}

应用程序。组成部分html

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<p>{{str()}}</p>

当我重新加载浏览器并检查日志时。角度重新记录4次。如果你知道为什么会这样，请告诉我。

链接闪电战：https://stackblitz.com/edit/angular-ivy-zqjr2d?file=src/app/app.component.ts

Answer 1

默认情况下，组件树将每隔几秒钟重新检查/渲染一次
此行为是由于Angular如何计算DOM（请看Angular生命周期）。

改进它的一种方法是在组件对象中使用ChangeDectionStrategy和OnPush选项，因为它只会在显式调用时检查一次。

这篇文章也可能对您有所帮助=）

Answer 2

这是因为您正在模板中调用一个方法，angular不知道该方法可以返回什么，所以它必须在每个更改检测周期中调用它。在开发模式下，每个更改检测执行两次，另外，当加载组件时，它必须渲染模板，然后检查是否有更改。

加载模板检查模板是否正确=2个周期。

开发模式每个周期两次。所以它变成2x2=4。