为何ExpressionChangedAfterItHasBeenCheckedError会被触发两次？

页面显示1而非0或2的原因 #

Angular的变更检测执行流程如下：

1. 组件初始化时count为0，首次变更检测将0渲染到视图。
2. 视图初始化完成后，先执行ngAfterViewInit，紧接着触发ngAfterViewChecked，此时count自增为1。
3. 由于钩子内修改了绑定属性count，Angular启动第二次变更检测，将1同步到页面。
4. 第二次变更检测结束后再次执行ngAfterViewChecked，count变为2。此时Angular检测到连续两次变更检测后状态仍不一致，抛出ExpressionChangedAfterItHasBeenCheckedError并终止后续检测。

最终页面显示1，是因为抛出错误前，只有第二次变更检测的结果（1）被更新到视图，第三次变更检测被终止，count=2不会被渲染。

ngAfterViewChecked仅运行2次，但错误抛出两次的原因 #

你看到的两次错误是Angular内部的错误报告机制导致，并非变更检测循环运行了3次：

• 第一次错误：第二次变更检测结束后，Angular发现count在检测前后值不一致（检测前是1，执行钩子后变为2），抛出首次错误。
• 第二次错误：Angular会额外执行一次验证性检查，这次检查同样发现状态不一致，于是抛出第二次错误，但该检查不会触发ngAfterViewChecked钩子，所以你看到钩子仅运行2次。

错误为何抛出两次而非一次 #

Angular设计这个双重报告机制，是为了强化开发者对变更检测问题的感知，避免误判。两次错误本质是同一个问题的两次确认——你在ngAfterViewChecked中修改绑定属性，打破了变更检测的单向数据流规则。

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