编程 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 相关文章推荐

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