浅谈对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 相关文章推荐
JavaScript 编程引入命名空间的方法
Jun 29 Javascript
帮助避免错误的Javascript陷阱清单
May 31 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
js工具方法弹出蒙版
May 08 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
js绘制购物车抛物线动画
Nov 18 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 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
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
php图片裁剪函数
2018/10/31 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
奇妙的js
2007/09/24 Javascript
JS 进度条效果实现代码整理
2011/05/21 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
Python requests上传文件实现步骤
2020/09/15 Python
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
后勤工作职责
2013/12/22 职场文书
简历中的自我评价怎么写
2014/01/29 职场文书
党课培训心得体会
2014/09/02 职场文书
法人授权委托书范本
2014/09/17 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
人事聘任通知
2015/04/21 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL