Angular中input失焦时ngDoCheck钩子为何被调用？

ngDoCheck钩子的核心特性是：只要Angular的变更检测周期运行，它就会被调用——不管组件的属性或输入绑定有没有实际变化。

回到你的场景，当绑定了[(ngModel)]的input失焦时，Angular的Forms模块会处理blur事件，这个事件会触发Angular的变更检测周期启动。哪怕你没有修改input的内容、text属性的值完全没变，变更检测依然会遍历组件树，你的组件作为变更检测的一部分，ngDoCheck钩子就会被执行。

简单来说：用户交互（包括失焦）会触发Angular的变更检测，而ngDoCheck在每次变更检测时都会被调用，和属性是否真的变化无关。

你的代码示例 #

app.component.html

<input type="text" name="name" id="" [(ngModel)]="text" />

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements DoCheck {
  text: any = 'Hi';

  constructor() {}

  ngDoCheck(): void {
    console.log('AppComponent ngDoCheck');
  }
}

内容的提问来源于stack exchange，提问作者Jay Bansod