Angular4 变更检测和Docheck钩子

来源：互联网发布：mysql offset limit 编辑：程序博客网时间：2024/06/11 22:47

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

阅读全文

0 0