Angular 6：debug模式出现ExpressionChangedAfterItHasBeenCheckedError问题咨询

嘿，这个问题我碰到过好多次了，给你掰扯清楚为什么debug模式报错、prod模式却没事：

错误本质：Angular变更检测的双重校验 #

Angular的变更检测机制是确保组件视图和数据模型保持同步的核心。在debug模式（也就是默认ng build对应的开发环境）下，Angular会做一层额外的校验：它会在第一次变更检测完成后，立刻再跑一遍检测，对比两次检测中所有绑定表达式的值。如果发现某个表达式的值在两次检测之间发生了变化，就会抛出ExpressionChangedAfterItHasBeenCheckedError——这其实是Angular在提醒你：“嘿，这里有个潜在的状态不一致问题，可能会导致视图显示异常！”

而在prod模式（ng build --prod）下，为了极致的性能优化，Angular会关闭这个二次校验的逻辑，只执行一次变更检测。所以即使你的代码里存在同样的表达式变更，prod模式也不会触发这个错误，但这并不代表问题消失了，只是Angular没再帮你检查而已。

为什么会触发这个错误？ #

最常见的场景是你在组件的后期生命周期钩子（比如ngAfterViewInit、ngAfterContentInit）里修改了某个绑定到模板的属性。举个例子：

// 错误示例：在ngAfterViewInit里修改绑定属性
ngAfterViewInit() {
  this.userName = "Updated Name"; // 这个属性绑定在模板里
}

第一次变更检测已经完成了视图渲染，你这时候修改了绑定属性，第二次校验就会发现值变了，从而抛出错误。

怎么解决这个问题？ #

• 手动触发变更检测：如果你的变更是合理的，可以注入ChangeDetectorRef，在修改属性后手动触发检测：

  constructor(private cdr: ChangeDetectorRef) {}
  
  ngAfterViewInit() {
    this.userName = "Updated Name";
    this.cdr.detectChanges(); // 告诉Angular重新检测
  }
  

• 调整逻辑时机：尽量把属性修改的逻辑移到更早的生命周期钩子（比如ngOnInit），这时候变更检测还没开始，就不会触发二次校验的冲突。
• 避免不必要的副作用：检查代码里有没有意外的循环引用、订阅回调导致的属性变更，这些都可能触发这个错误。

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