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() {
}
}