简介

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. Python3.x使用PyMysql连接MySQL数据库

    Python3.x使用PyMysql连接MySQL数据库 由于Python3.x不向前兼容,导致Python2.x中的很多库在Python3.x中无法使用,例如Mysqldb,我前几天写了一篇博客Py ...

  2. [BZOJ3674]可持久化并查集加强版&[BZOJ3673]可持久化并查集 by zky

    思路: 用主席树维护并查集森林,每次连接时新增结点. 似乎并不需要启发式合并,我随随便便写了一个就跑到了3674第一页?3673是这题的弱化版,本来写个暴力就能过,现在借用加强版的代码(去掉异或),直 ...

  3. node+koa2获取请求参数

    1.get方式: http://localhost:3000/?user=000001&body=0002&age=26 const router = require('koa-rou ...

  4. C++ operator重载运算符和隐式转换功能的实现

    C++ operator重载运算符和隐式转换功能的实现: #include <iostream> using namespace std; class OperatorTest { pub ...

  5. IO流(1)—之序列化与反序列化

    1.概念 序列化:把Java对象转换为字节序列的过程称为对象的序列化 反序列化:把字节序列恢复为Java对象的过程称为对象的反序列化 注:只有实现了Serializable和Externalizabl ...

  6. 10款免费开源PHP框架

    NO.1 Laravel - 巨匠级PHP开发框架 现在最流行的一款PHP框架,功能强大,学习和使用也非常简单方便,即使你是PHP新手,也不用担心入门问题. NO.2 Phalcon - 最快的PHP ...

  7. iphone程序适配ipad可以用下面的宏进行尺寸改写

    //判断是否为iPad #define ISIPAD [[[UIDevice currentDevice].model substringToIndex:4] isEqualToString:@&qu ...

  8. shell自动补全功能:bash和zsh

    首要一点:shell有多种,比如bash.zsh.csh.ksh.sh.tcsh等 因此,制作自动补全功能时,要先搞清楚,你使用的是哪种shell,各个shell制作方法是不同的,网上大部分介绍的是关 ...

  9. 微信小程序无法获取UnionId的情况及处理

    问题背景:做了微信小程序,一切都还正常,但是最后体验版放出去时,却发现很多用户无法绑定用户,后台返回:参数非法.经过多方排查,发现是微信拿到的code请求返回的数据里没有UnionId,也就是接口返回 ...

  10. one or more multiply defined symbols found

    在一个c++的.h文件中加入了这段代码: #include <string> using namespace std; std::string escapeStr(const std::s ...