发布于 4个月前

Angular Component组件的生命周期-ngDoCheck

Angular Component组件的生命周期(一)知道,ngOnChanges只能用于检测Component组件绑定的@Input属性的赋值和重置,并不能检测组件发生的任何变化。其中一个例子是:

let user:User = new User("张三");
user.name = “李四”;

当父组件向子组件的@Input属性传递的是一个User对象,但父组件是通过user.name来修改对象的值,没有对use重新赋值,这种情况下,ngOnChanges就不会检测到变化。

ngDoCheck

鉴于ngOnChanges功能所限,Angular提供了ngDoCheck钩子,它用于处理Component组件本身检测不到的变化。更直白的说,ngDoCheck能检测到组件所有变化,这种变化不一定时修改了数据,鼠标移动等操作也会导致Angular的变化检测。

它的原理就是,每次Angular对组件做变化检测时,都会调用ngDoCheck。

Angular提供了两种变化组件策略:

  • 基于zone.js实现的默认变化检测策略,只要Angular中的某个组件发生异步事件.就会检测整个组件树,以保证组件属性的变化或页面的变化是同步的。
  • onPush模式

后面会对变化检测策略详细讲解,此处不细说明。

因为每次Angular做变化检测,都会调用ngDoCheck,所以它的调用频次非常高。如果非必要,不建议使用ngDoCheck处理变化。

如果实在要使用ngDoCkeck做变化处理,那么要保证处理代码比较简单,对是否满足变化处理条件做判断。

ngDoCheck的使用

Angular提供了DoC heck接口 ,组件只要实现此接口的方法ngDoCheck。

import { Component, EventEmitter, Input, OnInit,DoCheck } from '@angular/core';
… 
@Component{
  selector: 'demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
}
export class DemoComponet implements OnInit,DoCheck {
   ngOnInit(): void {
    // do something
  }

   ngDoCheck(): void {
     if(user.age > 15) {
        //do something
     }
   }
}
©2020 edoou.com   京ICP备16001874号-3