变更检测
- Angular的变更检测机制配合zone.js来实现,保证组建变化和页面变化同步
- 浏览器中任何异步事件都会触发检测机制
- 检测模版所有绑定属性,若改变则相应区域会被更新
- 需要注意的是:变更检测机制只会把组件属性的改变反应到模版上,不会改变组件值
Angular如何进行变更检测
每个组件都有属于自己的变更检测器,当任何一个变更检测器检查到变化,zone.js会根据组件的变更检测策略来检查组件,以判断组件是否需要更新它的模版。
检测策略
- Default策略,默认情况下所有组件都使用Default策略
- OnPush策略
如果所有组件都使用Default策略,不管变更发生在哪个组件上,zone.js会检测整个组件树,但会跳过使用OnPush策略的组件,OnPush策略的组件只有当其输入属性(即@Input)发生改变时,zone.js才会检测这个组件及其子组件。
更改策略,在@component加上changeDetection:ChangeDetectionStrategy.OnPush
DoCheck
检测Angular自身无法捕获的变更并采取行动
- 这个钩子的初次调用是因为数据渲染,而后来的仅仅只是点击input框,也会调用ngDoCheck钩子
- 使用这个钩子时需注意,用在特定事件发生时才触发业务逻辑,否则会造成后台数据过大
demo:
docheck.component.html