关于 ExpressionChangedAfterItHasBeenCheckedError 错误你所需要知道的事情
配合 OnChanges钩子，angular的变更检测机制和DoCheck 使用，效果更棒！
Angular变更检测顺序（读后感）
设：有A、B、C三个组件，C是B的子组件，B是A的子组件，A是根组件
- 使用构造函数，实例化A组件
- 实例化B组件，将A组件中对应的属性值绑定到B组件，此属性值是B组件的输入属性，本质上是B实例化后初始化可能会需要的参数
- B组件已经实例化，需要的参数也已经传进来（输入属性），接下来做初始化操作ngInit()，该方法只会在B组件实例化后执行一次；还会做onChanges()操作，该方法只会在输入属性值发生改变时（本质上是内存地址发生改变）才执行；还会做DoCheck()操作，这个操作在每次“angular变更检测时”都会执行。每个异步操作都会引发一遍从头到尾、整个的变更检测。（备注；这些方法都是在B组件中定义的）
- 到目前为止，A组件中该实例化的（包括A组件中的B组件）都已经准备妥当了，接下来该将A组件中对应的属性值绑定到模板中定义的表达式了（比如{{name}}）
- 接下来执行递归操作，将B组件中的C组件实例化，将B组件中对应的属性值绑定到C组件中的输入属性，然后执行C组件中定义的ngInit()、onChanges()、DoCheck()等操作，然后将B组件中对应的属性值绑定到模板中定义的表达式
- 如果C组件中还有D组件，同理
- 为所有子组件调用当前组件的 ngAfterViewInit()
- 这样，一套完整的变更检测就算执行完成了。记住，在这一个变更检测周期内，某个属性值用过以后，不能再改变它的值，angular会认为这是不稳定的，会报错ExpressionChangedAfterItHasBeenCheckedError
- 接下来，由异步操作（包括用户在页面上随意的的点击行为等）引起的再次变更检测，因为组件之前都已经实例化过了，所以省掉了实例化过程和ngInit()方法（ngAfterViewInit是不是也省略了？没验证）
- Default策略：如果所有组件都使用Default策略，那么变更不管发生在哪个组件上，zone.js都会检测整个组件树
- OnPush策略：如果有一个组件声明自己的策略为OnPush策略，那么只有组件的输入属性发生变化时，zone.js才会检测这个组件及其子组件，也才会调用对应的DoCheck()
网友评论