Angular4 变更检测和Docheck钩子

1.变更检测机制

（1）目的：保证组件属性和浏览器的显示同步，浏览器里面发生任何异步变化都会触发“变更检测”，当变更检测运行时，会检测应用中所有的绑定关系。

（2）检测策略：

     A:Default策略：检查所有组件

     B.Onpush策略：阻止检查继续走下去

（3）DoCheck钩子的调用

import { Component, OnInit, Input, OnChanges, SimpleChanges, DoCheck } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit,OnChanges,DoCheck {
  @Input() greeting:string;
  @Input() user:{name:string};
  message:string="初始化消息"
  oldUserName:string;//用来保存user.name变更之前的值
  changeDetected:boolean;//标记当前的user.name属性是否发生变化
  changeCount:number;//标记变更检测机制被调用的次数

  ngDoCheck(): void {   //触发变更检测机制就是调用DoCheck
     if(this.user.name!==this.oldUserName){
          //user.name发生了变化
          this.changeDetected=true;
          console.log("Docheck: user.name 从"+this.oldUserName+"变为"+this.user.name);
          this.oldUserName=this.user.name;
     }
     if(this.changeDetected){
       this.changeCount=0
     }else{
       this.changeCount=this.changeCount+1;
       console.log("DoCheck:user.name没发生变化时，ngDoCheck方法被调用了"+this.changeCount+"次")
     }
  }
  ngOnChanges(changes: SimpleChanges): void {
     console.log(JSON.stringify(changes,null,2));
  }

  constructor() { }
 
  ngOnInit() {
  }

}