编程 Javascript

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

Posted in Javascript onJuly 10, 2017

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

概述

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

生命周期执行顺序

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生命周期钩子函数的详细介绍

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

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

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

- Author -

小处成就大事

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Prototype源码浅析 String部分(三)之HTML字符串处理

Jan 15 Javascript

利用javascript实现全部删或清空所选的操作

May 27 Javascript

jquery+html5时钟特效代码分享（可设置闹钟并且语音提醒）

Mar 30 Javascript

JS中常用的输出方式(五种)

Jun 12 Javascript

DropDownList控件绑定数据源的三种方法

Dec 24 Javascript

jQuery中Chosen三级联动功能实例代码

Mar 07 Javascript

详解使用vue实现tab 切换操作

Jul 03 Javascript

jQuery完成表单验证的实例代码(纯代码)

Sep 30 jQuery

Vue2.0系列之过滤器的使用

Mar 01 Javascript

vue webpack打包后图片路径错误的完美解决方法

Dec 07 Javascript

vue+Vue Router多级侧导航切换路由(页面)的实现代码

Dec 20 Javascript

js实现图片粘贴到网页

Dec 06 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/03/25 PHP

在SAE上搭建最新wordpress的方法

2014/12/21 PHP

给ECShop添加最新评论

2015/01/07 PHP

为百度UE编辑器上传图片添加水印功能

2015/04/16 PHP

php获取指定(访客)IP所有信息（地址、邮政编码、国家、经纬度等）的方法

2015/07/06 PHP

php文件上传你真的掌握了吗

2016/11/28 PHP

PHP PDOStatement::bindColumn讲解

2019/01/30 PHP

PHP的HTTP客户端Guzzle简单使用方法分析

2019/10/30 PHP

PHP xpath提取网页数据内容代码解析

2020/07/16 PHP

checkbox 多选框联动实现代码

2008/10/22 Javascript

javascript四舍五入函数代码分享(保留后几位)

2013/12/10 Javascript

jquery+ajax验证不通过也提交表单问题处理

2014/12/12 Javascript

纯jquery实现模仿淘宝购物车结算

2015/08/20 Javascript

SpringMVC返回json数据的三种方式

2015/12/10 Javascript

详解React-Todos入门例子

2016/11/08 Javascript

微信端开发--登录小程序步骤

2017/01/11 Javascript

js禁止Backspace键使浏览器后退的实现方法

2017/09/01 Javascript

基于bootstrop常用类总结(推荐)

2017/09/11 Javascript

解决nodejs的npm命令无反应的问题

2018/05/17 NodeJs

[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日

2013/07/30 DOTA

[00:57]辉夜杯战队访谈宣传片—VG

2015/12/25 DOTA

[01:14]DOTA2 7.22版本新增神杖效果展示（智力英雄篇）

2019/05/29 DOTA

浅析Python中的getattr(),setattr(),delattr(),hasattr()

2016/06/14 Python

python 使用值来排序一个字典的方法

2018/11/16 Python

Python使用matplotlib绘制三维参数曲线操作示例

2019/09/10 Python

Python 实现训练集、测试集随机划分

2020/01/08 Python

django 链接多个数据库并使用原生sql实现

2020/03/28 Python

通过python 执行 nohup 不生效的解决

2020/04/16 Python

Python如何使用input函数获取输入

2020/08/06 Python

介绍一下游标

2012/01/10 面试题

中学生期中自我鉴定

2014/04/20 职场文书

志愿者活动总结报告

2014/06/27 职场文书

户籍证明格式

2014/09/15 职场文书

党员个人整改方案及措施

2014/10/25 职场文书

党员教师学习党的群众路线教育实践活动心得体会

2014/10/31 职场文书

2016年党员公开承诺书格式范文

2016/03/24 职场文书