Angular学习笔记（十五）组件周期钩子之变更检测和DoCheck

变更检测

• 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

<tr><td>Name: </td><td><input [(ngModel)]="name"></td></tr>
 
 

 
 
1

docheck.component.ts

export class DocheckComponent implements OnInit, DoCheck {
  name:string;
  counts:number = 0;
  oldName:string;
  constructor() { }

  ngOnInit() {
    this.name = '张三';
  }
  ngDoCheck():void{
    if(this.name!==this.oldName){
        console.log(`你从${this.oldName}改成${this.name}`);
        this.oldName = this.name;
    }else{
        this.counts = this.counts + 1;
        console.log("没有任何改变地调用了"+this.counts+"次");          
    }

  }

}





 
 

  
  
  
并不是只有docheck.component组件才会触发ngDoCheck钩子的调用，页面上的点击事件也会触发ngDoCheck钩子的调用