浅谈对Angular中的生命周期钩子的理解


Posted in Javascript onJuly 31, 2017

本文介绍了Angular中的生命周期钩子的理解,分享给大家,希望对大家有所帮助

什么是生命周期钩子

简单点来说生命周期钩子就是Angular中一个组件从被创建当销毁期间的一些有意义的关键时刻.这些关键时刻在Angular中被Angular核心模块 @angular/core 暴露出来,赋予了我们在它们发生时采取行动的能力.

有哪些生命周期钩子

Angular中从一个组件的创建到销毁一个有八个生命周期钩子它们,按照先后顺序.它们分别是:

  1. ngOnChanges()
  2. ngOnInit()
  3. ngDoCheck()
  4. ngAfterContentInit()
  5. ngAfterContentChecked()
  6. ngAfterViewInit()
  7. ngAfterViewChecked()
  8. ngOnDestroy()

其中: ngOnInit() 、 ngAfterContentInit() 、 ngAfterViewInit() 和 ngOnDestroy() 在一个组件的生命周期中只会被调用一次,其它的都有可能会被多次调用.下面,就让我们来详细解列一下这些生命周期钩子.

ngOnChanges()

  • 当Angular(重新)设置数据绑定输入属性时响应。 该方法接受当前和上一属性值的SimpleChanges对象
  • 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在ngOnInit()之前。

ngOnChanges() 生命周期的调用与一个组件中的输入属性有关.

当在一个组件中使用 @Input() 定义了一个输入属性时.只要这个输入属性的值发生了改变.就会触发 ngOnChanges() 生命周期钩子.这个生命周期钩子被调用时会传入一个 SimpleChanges 对象,这个对象中包含了输入属性当前值和上一值.

@Input()
public name: string;

ngOnChanges(changes: SimpleChanges): void {
 console.log(changes); // name:SimpleChange {previousValue: "a", currentValue: "ab", firstChange: false}
}

上面是我定义了一个输入属性 name 并将从 a 它改为 ab 之后的打印结果,可能你还注意到了打印的结果中还有一个 firstChange 属性.它是一个Booleans,表明你是否是第一次改变.

同时,还有一点需要注意:你的输入属性定义为你引用类型和基本类型的时候其表现结果是不同的.当你的输入属性是基本类型时.你的每一次改变都会触发 ngOnChanges() 生命周期钩子,而当你的输入属性是引用类型时,你改变你引用类型 当中 的属性时,并不会触发 ngOnChanges() 生命周期钩子.只有当你将你引用类型数据的指针指向另一块内存地址的时候才会触发 ngOnChanges() 生命周期钩子.

ngOnInit()

  • 在Angular第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。
  • 在第一轮ngOnChanges()完成之后调用,只调用一次。

ngOnInit() 是一个组件的生命周期中一定存在的一个钩子.它在一个组件被初始化的时候被调用.在这个期间,你可以执行一些相应的数据绑定操作.

ngDoCheck()

  • 检测,并在发生Angular无法或不愿意自己检测的变化时作出反应。
  • 在每个Angular变更检测周期中调用,ngOnChanges()和ngOnInit()之后。

ngDoCheck() 是Angular中的变更检测机制.它由 zone.js 来实现的.其行为是只要你的Angular中的某个组件发生异步事件.就会检查整个组件树,以保证组件属性的变化或页面的变化是同步的.所以 ngDoCheck() 的触发相当频繁的.并且是我们无法预料到的.也许我们在页面上的一个无意识操作,就会触发几个甚至几十个的 ngDoCheck() 生命周期钩子.

所以我们在使用 ngDoCheck() 生命周期钩子的时候一定要加上判断.以避免无用的触发干扰我们.

ngAfterContentInit()

  • 当把内容投影进组件之后调用。
  • 第一次ngDoCheck()之后调用,只调用一次。
  • 只适用于组件。

当父组件向子组件投影内容的时.在子组件内会初始化父组件的投影内容,此时会调用 ngAfterContentInit() 生命周期钩子.在整个组件生命周期中 ngAfterContentInit() 生命周期钩子只会调用一次.如下所示:

// 父组件
<app-child>
 <p>我是父组件向子组件的投影内容</>
</app-child>


// 子组件 ChildComponent
<div>
 //接受父组件的投影内容
 <ng-content></ng-content>
</div>

ngAfterContentChecked()

  • 每次完成被投影组件内容的变更检测之后调用。
  • ngAfterContentInit()和每次ngDoCheck()之后调用
  • 只适合组件。

当父组件向子组件的投影内容发生改变时会调用 ngAfterContentChecked() 生命周期钩子.它与 ngDoCheck() 类似.当投影内容发生改变时,就会执行变更检查机制.同时调用 ngAfterContentChecked() 生命周期钩子.此外.还有一点:当父组件和子组件都有投影内容时,会先执行父组件的生命周期钩子.它与下面要说的 ngAfterViewInit() 和 ngAfterViewChecked() 相反.

ngAfterViewInit()

  • 初始化完组件视图及其子视图之后调用。
  • 第一次ngAfterContentChecked()之后调用,只调用一次。
  • 只适合组件。

当其组件本身和所有的子组件渲染完成,已经呈现在页面上时,调用 ngAfterViewInit() 生命周期钩子.在整个组件生命周期中 ngAfterViewInit() 生命周期钩子只会调用一次.

ngAfterViewChecked()

  • 每次做完组件视图和子视图的变更检测之后调用。
  • ngAfterViewInit()和每次ngAfterContentChecked()之后调用。
  • 只适合组件。

当组件及其子组件的视图发生改变时,执行完变更检查机制后调用.当父组件和子组件都发生视图变化时,会先执行子组件的生命周期钩子.

注意:这里所说的视图发生改变不一定是真正页面上的变化.只是Angular种所认为的视图变化.因为Angular本身并不能察觉到页面上显示的视图.所以在Angular认为,只要你在后台定义的属性发生了改变,就是视图有了变化.从而就会调用 ngAfterViewChecked() 生命周期钩子.

ngOnDestroy

  • 当Angular每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器,以防内存泄漏。
  • 在Angular销毁指令/组件之前调用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ext JS添加子组件的误区探讨
Jun 28 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
javascript实现的简单计时器
Jul 19 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 #Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 #Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 #Javascript
Kindeditor单独调用多图上传实例
Jul 31 #Javascript
老生常谈ES6中的类
Jul 31 #Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 #Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 #Javascript
You might like
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
Move.js入门
2017/02/08 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
Python中的函数作用域
2018/05/07 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
Python3离线安装Requests模块问题
2019/10/13 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
sort命令的作用和用法
2012/11/04 面试题
日语求职信范文
2013/12/17 职场文书
仓库保管员岗位职责
2013/12/20 职场文书
保安队长职务说明书
2014/02/23 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
活动策划求职信模板
2014/04/21 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis
利用Apache Common将java对象池化的问题
2022/06/16 Servers