Angular中ngAfterViewChecked与ngAfterContentChecked为何被调用两次？

我的Angular应用仅包含以下代码：

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

@Component({
  selector: 'app-root',
  template: ''
})
export class AppComponent implements AfterViewChecked, AfterContentChecked {
  ngAfterViewChecked(): void {
    console.log('ngAfterViewChecked');
  }
  ngAfterContentChecked(): void {
    console.log('ngAfterContentChecked');
  }
}

为何上述两个生命周期方法会被调用两次？

编辑补充：我找到了相关文档说明：

在开发模式下，Angular会在每次变更检测运行后执行额外检查，确保绑定没有变化。

于是我执行以下命令验证生产环境是否只会调用一次，但发现它们仍然被调用两次：

ng build --configuration=production
cd dist/my-app
npx http-server

为何生产环境下它们也会被调用两次？这与文档描述矛盾吗？我是否应该将此报告为bug？

这并非bug，也和文档描述不冲突。Angular的变更检测触发次数和应用初始化流程直接相关，即便在生产环境，初始化阶段也可能触发两次变更检测：

• 首次初始化检测：Angular启动时触发第一次变更检测，完成组件树构建、初始渲染及对应生命周期钩子的调用。
• 二次稳定检测：应用初始化完成后，Angular内部会触发第二次变更检测，确保整个应用状态完全稳定——这属于框架初始化流程的一部分，和开发模式下的额外检查不是一回事。

哪怕组件模板为空，Angular仍会执行完整的初始化逻辑，两次变更检测都是必要的：第一次用于搭建组件结构，第二次用于确认应用状态无异常。这种行为是Angular框架的正常设计，并非问题。

如果想进一步排查变更检测的触发源，可以使用Angular DevTools的变更检测面板查看具体触发原因，或者在钩子方法中结合ChangeDetectorRef的相关API分析状态。

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