Angular中cdr.detectChanges()为何仅触发子组件ngDoCheck？

一、为何调用Child1的detectChanges()仅触发Child2的ngDoCheck？ #

要搞懂这个问题，得先理清detectChanges()和ngDoCheck的核心逻辑：

• detectChanges()的作用是触发当前组件及其所有子组件的变更检测流程，但不代表每个组件的ngDoCheck都会被触发。
• ngDoCheck不是每次变更检测都会执行——它只有在Angular认为组件可能存在常规变更检测没捕捉到的状态变化时才会调用。

回到你的场景：

• 当你在Child1里调用detectChanges()时，Child1本身的变更检测周期其实已经启动了，它的ngDoCheck会在本轮检测的早期阶段执行完毕，所以不会重复触发。
• 而Child2作为Child1的子组件，它的变更检测是被这次detectChanges()主动触发的，属于全新的子组件检测周期，因此它的ngDoCheck会正常执行。

另外，如果Child1在调用detectChanges()之前，没有发生常规变更检测能感知到的状态变化，Angular也不会触发它的ngDoCheck。

二、如何确认当前组件已被检查？ #

可以用这几种简单方法：

• 借助AfterViewChecked钩子：这个钩子会在组件视图（包括子视图）完成变更检测后立即触发，在里面加日志就能确认：

  ngAfterViewChecked(): void {
    console.log('Child1 已完成本轮变更检测');
  }
  

• 手动标记检测状态：在组件里定义一个布尔变量，比如isChecked，在AfterViewChecked或ngDoCheck里把它设为true，通过这个变量跟踪组件是否被检查过。
• 用Angular官方调试工具：Angular DevTools支持可视化查看变更检测的触发情况，能直观看到哪些组件执行了变更检测。

内容的提问来源于stack exchange，提问作者michalgrzegorczyk-dev