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 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
JQuery jsonp 使用示例代码
Aug 12 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 Javascript
Vue组件生命周期运行原理解析
Nov 25 Vue.js
使用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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
python获取url的返回信息方法
2018/12/17 Python
详解Django配置JWT认证方式
2020/05/09 Python
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
小学庆六一活动方案
2014/02/28 职场文书
法制宣传口号
2014/06/16 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
教师师德师风整改措施
2014/10/24 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
2016国培学习心得体会
2016/01/08 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL
JavaScript实现登录窗体
2021/06/22 Javascript