Angular-ngDoCheck
| 钩子 | 用途 | 时机 |
|---|---|---|
ngDoCheck() |
检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应。 欲知详情和范例，参见本文档中的自定义变更检测。 | 紧跟在每次执行变更检测时的 ngOnChanges() 和 首次执行变更检测时的 ngOnInit() 后调用。 |
无法检测: input输入框的click
不愿意检测: 组件的更新策略设置为OnPush
假如有三个组件,他们的层级关系:
--组件A
--组件B
--组件C
默认变更检测策略Default:
Checking A component:
- update B input bindings
- call NgDoCheck on the B component
- update DOM interpolations for component A
Checking B component:
- update C input bindings
- call NgDoCheck on the C component
- update DOM interpolations for component B
Checking C component:
- update DOM interpolations for component C
OnPush策略:
Checking A component:
- update B input bindings
- call NgDoCheck on the B component
- update DOM interpolations for component A
if (bindings changed) -> checking B component:
- update C input bindings
- call NgDoCheck on the C component
- update DOM interpolations for component B
Checking C component:
- update DOM interpolations for component C
前置条件:假如组件A的数据绑定是个对象,组件B的变更检测策略是OnPush.
触发条件:当组件A中只有对象的属性值变化,那么组件B上不执行变更检测.
结果: 在组件A上执行变更检测时,会更新(update)对组件B的数据绑定(如果只是属性变化,即引用没有变化,不会触发组件B的ngOnChanges),然后调用组件B的ngDoCheck(注意:是在组件A的变更检测时调用),此时可以比较老的数据和新的数据,如果发现数据有变化,调用ChangeDetectionRef实例的markForCheck()方法,触发组件B的变更检测.
ngDoCheck的作用: Angular不愿意检测组件B的变更时(组件B的OnPush),但是数据发生变化,使用ngDoCheck,可以捕获到变化,然后执行操作.
总结:
①一个子组件B的变更检测机制是OnPush
②父组件A的输入属性发生变化但是引用没有变化时,子组件B的变更检测不会执行,但是子组件B的ngDoCheck()会被调用
③ngDoCheck对比数据,发现数据有变化,调用markForCheck()方法,触发子组件的更新
