Angular2生命周期钩子函数的详细介绍


Posted in Javascript onJuly 10, 2017

Angular每个组件都存在一个生命周期,从创建,变更到销毁。Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力,掌握生命周期,可以让我们更好的开发Angular应用

概述

每个接口都有唯一的一个钩子方法,它们的名字是由接口名再加上ng前缀构成的。比如,OnInit接口的钩子方法叫做ngOnInit, Angular在创建组件后立刻调用它

Angular2生命周期钩子函数的详细介绍

生命周期执行顺序

ngOnChanges

在有输入属性的情况下才会调用,该方法接受当前和上一属性值的SimpleChanges对象。如果有输入属性,会在ngOnInit之前调用。

ngOnInit

在组件初始化的时候调用,只调用一次,在第一次调用ngOnChanges之后调用

ngDoCheck

在组件定义的属性或方法变更时调用(用于脏值之检测,非常耗性能,因为会把所有的属性和方法都检测一遍),会在ngOnChanges()和ngOnInit()之后

ngAfterContentInit

在组件内容初始化之后调用,在第一次ngDoCheck之后调用,只调用一次

ngAfterContentChecked

在组件每次检查内容放生变更时调用。在ngAfterContentInit和每次ngDoCheck之后调用

ngAfterViewInit

在组件相应的视图初始化之后调用,第一次ngAfterContentChecked之后调用,只调用一次

ngAfterViewChecked

在组件每次检查视图发生变更时调用。ngAfterViewInit和每次ngAfterContentChecked之后调用。

ngOnDestroy

在组件销毁前调用,做一些清理工作,比如退订可观察对象和移除事件处理器,以免导致内存泄漏。

Angular2生命周期钩子函数的详细介绍

上面代码书写是按顺序的,看下面控制台打印

Angular2生命周期钩子函数的详细介绍

现在我们钩子函数的顺序打乱,在看看代码

Angular2生命周期钩子函数的详细介绍

控制台输出跟上面是一样的

Angular2生命周期钩子函数的详细介绍

constructor和ngOnInit

constructor是ES6中class中新增的属性,当class类实例化的时候调用constructor,来初始化类。Angular中的组件就是基于class类实现的,在Angular中,constructor用于注入依赖。

Angular2生命周期钩子函数的详细介绍

ngOnInit是Angular中生命周期的一部分,在constructor后执行。在Angular中用于初始化变量和数据绑定等

Angular2生命周期钩子函数的详细介绍

NgChanges

当我们监听了OnChanges钩子。 一旦检测到该组件(或指令)的输入属性发生了变化,Agular就会调用ngOnChanges()方法

Angular2生命周期钩子函数的详细介绍

效果演示

Angular2生命周期钩子函数的详细介绍

DoCheck

当组件中属性或函数发生变化时DoCheck会执行脏值检测,遍历所有变量

Angular2生命周期钩子函数的详细介绍

效果演示

Angular2生命周期钩子函数的详细介绍

个人学习心得,大神路过,不喜勿喷?,如果代码有错误,欢迎纠正同时也欢迎交流

感谢阅读,希望能帮助到大家,也希望大家多多支持三水点靠木!

Javascript 相关文章推荐
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
js读取注册表的键值示例
Sep 25 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 #Javascript
在vue中获取dom元素内容的方法
Jul 10 #Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 #jQuery
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 #Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 #Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 #Javascript
vue实现表格数据的增删改查
Jul 10 #Javascript
You might like
php 带逗号千位符数字的处理方法
2012/01/10 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
php实现中文转数字
2016/02/18 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
laravel自定义分页效果
2017/07/23 PHP
在js中使用"with"语句中跨frame的变量引用问题
2007/03/08 Javascript
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
详解Node全局变量global模块
2017/09/28 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
js实现带有动画的返回顶部
2020/08/09 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
Python匹配中文的正则表达式
2016/05/11 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
python和shell获取文本内容的方法
2018/06/05 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
机电一体化专业应届本科生求职信
2013/09/27 职场文书
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
给下属加薪申请报告
2015/05/15 职场文书
地球上的星星观后感
2015/06/02 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL