简介

Angular 指令的生命周期,它是用来记录指令从创建、应用及销毁的过程。Angular 提供了一系列与指令生命周期相关的钩子,便于我们监控指令生命周期的变化,并执行相关的操作。Angular 中所有的钩子如下图所示:

分类

  • 指令与组件共有的钩子

    • ngOnChanges
    • ngOnInit
    • ngDoCheck
    • ngOnDestroy
  • 组件特有的钩子
    • ngAfterContentInit
    • ngAfterContentChecked
    • ngAfterViewInit
    • ngAfterViewChecked

调用顺序

  1. ngOnChanges - 当数据绑定输入属性的值发生变化时调用
  2. ngOnInit - 在第一次 ngOnChanges 后调用
  3. ngDoCheck - 自定义的方法,用于检测和处理值的改变
  4. ngAfterContentInit - 在组件内容初始化之后调用
  5. ngAfterContentChecked - 组件每次检查内容时调用
  6. ngAfterViewInit - 组件相应的视图初始化之后调用
  7. ngAfterViewChecked - 组件每次检查视图时调用
  8. ngOnDestroy - 指令销毁前调用

如何实现

要实现生命周期钩子,只需实现对应的接口即可,如实现ngOnChanges钩子只需实现OnChanges接口即可:

export class XxxComponent implements
OnInit, OnChanges,
DoCheck, AfterContentInit,
AfterContentChecked, AfterViewChecked,
AfterViewInit, OnDestroy {
// balabalabala...
}

ngOnChanges

触发条件

OnChanges只对输入的不可变对象起作用。

输入属性以前说过,使用@Input装饰的属性,这里还需要注意不可变对象,在Angular中,典型的不可变对象是string类型,但所有自定义对象均为可变对象,如:user:{name:string},可变对象即使被定义为输入属性,也不会触发OnChanges方法。

ngOnChanges方法参数

ngOnChanges方法有一个SimpleChanges类型的参数,它其实是一个类型为SimpleChange,并且键值为属性名的数组:

export interface SimpleChanges { [propName: string]: SimpleChange; }

SimpleChange的结构如下:

export declare class SimpleChange {
previousValue: any;
currentValue: any;
firstChange: boolean;
constructor(previousValue: any, currentValue: any, firstChange: boolean);
/**
* Check whether the new value is the first value assigned.
*/
isFirstChange(): boolean;
}

假如我们的组件中有一个满足触发OnChanges钩子条件的属性名叫inputVal,那么可以通过如下方式获取它变化前后的值:

  ngOnChanges(changes: SimpleChanges): void {
console.log('ngOnChanges中inputVal变更前值为:'+ changes['inputVal'].previousValue);
console.log('ngOnChanges中inputVal变更后值为:'+ changes['inputVal'].currentValue);
}

ngOnInit

在第一次 ngOnChanges 执行之后调用,并且只被调用一次。它主要用于执行组件的其它初始化操作或获取组件输入的属性值。

ngDoCheck

当组件的输入属性发生变化时,将会触发 ngDoCheck 方法。我们可以使用该方法,自定义我们的检测逻辑。

特别注意,使用时要比较精准的定义检查位置,否则会造成性能问题,因为任何变化,比如鼠标的点击事件或键盘的输入事件都会触发ngDoCheck

ngAfterContentInit

在组件使用 ng-content 指令的情况下,Angular 会在将外部内容放到视图后用。它主要用于获取通过 @ContentChild 或 @ContentChildren 属性装饰器查询的内容视图元素。

ngAfterContentChecked

在组件使用 ng-content 指令的情况下,Angular 会在检测到外部内容的绑定或者每次变化的时候调用。

ngAfterViewInit

在组件相应的视图初始化之后调用,它主要用于获取通过 @ViewChild 或 @ViewChildren 属性装饰器查询的视图元素。

ngAfterViewChecked

组件每次检查视图时调用

ngOnDestroy

在指令被销毁前,将会调用 ngOnDestory 方法。它主要用于执行一些清理操作,比如:移除事件监听、清除定时器、退订 Observable 等。

Angular4学习笔记(九)- 生命周期钩子简介的更多相关文章

  1. Angular 5.x 学习笔记(2) - 生命周期钩子 - 暂时搁浅

    Angular 5.x Lifecycle Hooks Learn Note Angular 5.x 生命周期钩子学习笔记 标签(空格分隔): Angular Note on cnblogs.com ...

  2. Vue2学习笔记:实例生命周期

    实例生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM .在这个 ...

  3. VUE 学习笔记 二 生命周期

    1.除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来 var data = { a: 1 } var vm = new Vue({ el: ' ...

  4. AngularJs学习笔记-组件生命周期

    组件生命周期 (1)组件生命周期钩子 constructor:组件创建时被创建 ngOnChanges: 父组件修改或初始化子组件的输入属性时被调用,如果子组件没有输入属性,则永远不会被调用,它的首次 ...

  5. vue学习(十九) 生命周期 了解

    生命周期:从vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件统称为生命周期 生命周期钩子:就是生命周期事件的别名而已 生命周期钩子==生命周期函数==生命周期事件 生命周期函数分类 ...

  6. Java Web学习笔记-Servle生命周期

    Servlet会在服务器启动或第一次请求该Servlet的时候开始生命周期,在服务器停止的时候结束生命周期. 无论请求多少次Servlet,最多只有一个Servlet实例.多个客户端并发请求Servl ...

  7. android学习笔记 activity生命周期&任务栈&activity启动模式

    activity生命周期 完整生命周期 oncreate->onstart->onresume->onpause->onstop->ondestory 使用场景:应用程序 ...

  8. iOS学习笔记—ViewController/生命周期

    ViewController是iOS应用程序中重要的部分,是应用程序数据和视图之间的重要桥梁,ViewController管理应用中的众多视图.iOS的SDK中提供很多原生ViewController ...

  9. MVC学习笔记---MVC生命周期

    Asp.net应用程序管道处理用户请求时特别强调"时机",对Asp.net生命周期的了解多少直接影响我们写页面和控件的效率.因此在2007年和2008年我在这个话题上各写了一篇文章 ...

随机推荐

  1. 搞IT,算法编程不错的学习网址 & 一些专栏博客大神的地址(汇总)

    博客专栏大神 王晓华(算法的乐趣) 算法系列:http://blog.csdn.net/orbit/article/category/830251 PostgreSQL深入理解内核系列:http:// ...

  2. 2016年3月17日Android学习笔记

    1.Java.io.ByteArrayOutputStream.writeTo()方法实例 java.io.ByteArrayOutputStream.writeTo(OutputStream out ...

  3. iOS主流机型更新

    主流机型更新后,舍弃了原有的iPhone 4 ,iPhone 4s, iPhone 5 ,iPhone 5s.增加了iPhone X,iPhone 8和iPhone 8 plus. 总体上屏幕趋于一个 ...

  4. Internet Explorer 11:不要再叫我IE

    上周,Internet Explorer 11搭载Windows 8.1预览版而来,相信很多浏览迷也已经在使用中.Internet Explorer 11 Preview 改进了与 Web 标准.其他 ...

  5. c++ try catch 问题

    以前都是用try{} catch(…){}来捕获C++中一些意想不到的异常, 今天看了Winhack的帖子才知道,这种方法在VC中其实是靠不住的.例如下面的代码: 以前都是用try{} catch(… ...

  6. 八幅漫画理解使用 JSON Web Token 设计单点登录系统

    原文出处: John Wu 上次在<JSON Web Token – 在Web应用间安全地传递信息>中我提到了JSON Web Token可以用来设计单点登录系统.我尝试用八幅漫画先让大家 ...

  7. windows下php7.1安装redis扩展以及redis测试使用全过程(转)

    最近做项目,需要用到redis相关知识.在Linux下,redis扩展安装起来很容易,但windows下还是会出问题的.因此,特此记下自己实践安装的整个过程,以方便后来人. 一,php中redis扩展 ...

  8. Java 之外,是 Scala 还是 Groovy?【转载】

    原文地址 Scala 和 Groovy 都是基于 JVM 的语言,相比 Java,它们都有语法更加简明和表达能力更丰富.对于那些既想不脱离开 JVM 又想避免 Java 繁琐语句的开发人员来说,Sca ...

  9. logstash 学习小记

    logstash 学习小记 标签(空格分隔): 日志收集 Introduce Logstash is a tool for managing events and logs. You can use ...

  10. 【转】苹果App Store审核指南中文翻译(更新)

    (注:<苹果应用商店审核指南>中文翻译最近一次更新为2013-03-04,文中红色部分是相对于2013-03-04版本的新增内容,绿色部分代表更改的内容,蓝色表示苹果相关官方文档的链接.) ...