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
     }
   }
}

版权声明:著作权归作者所有。

相关推荐

Angular 4选择组件模板DOM元素(DOM操作)的方式

Angular提供了多种方式让我们获取页面的元素。主要分为两种:基于Decorator:@ViewChild,@ViewChildren,@ContentChild,@ContentChildren使用ElementRef以及querySelectorDecorator:@ViewChild,@ViewChildren,@ContentChild,@ContentChildren@ViewChil

Angular入口组件(entry component)和声明式组件的区别

Angular的声明式组件和入口组件的区别体现在两者的加载方式不同。声明式组件是通过组件声明的selector加载入口组件(entry component)是通过组件的类型动态加载声明式组件声明式组件会在模板里通过组件声明的selector加载组件。示例@Component({   selector: 'a-cmp',   templat

chage命令:修改账号密码的过期信息

说明chage命令用来指定修改密码后密码的有效天数。 系统会根据此值来限定用户必须更改密码的日期。语法chage [options] LOGIN LOGIN:用户名选项-m days: 表示密码可更改的最小天数。-M days: 表示密码有效(可更改)的最大天数-E Date :表示在该日期之后密码失效,格式

Angular 5交换(重排)动态组件的位置

如果忽略了angular的组件是由数据控制的特性,很容易陷入使用dom操作控制组件。最简单的方式是使用数组存放数据,通过重排数组中的元素的位置,从而达到重排组件的效果。示例:app.tsimport {Component, NgModule, VERSION} from '@angular/core'import {BrowserModule} from '@angular/platform-br

Angular Component组件的生命周期-ngOnChanges,ngOnInit

Angular Component组件的生命周期按时间次序可以分为以下阶段:组件的生命周期是从Angular 实例化组件开始接着渲染组件的视图以及子组件视图完成组件视图渲染后,Angular仍然会检测组件的变化,主要包括检测绑定属性的变化(change detect)根据检测到的变化,如果有必要,则更新组件和它的子组件Component组件生命周期结束最终是销毁组件,以及从DOM中移除组件的模板有