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

CSS+JS构建的图片查看器

Jul 22 Javascript

javascript concat数组累加示例

Sep 03 Javascript

浅析javascript中function 的 length 属性

May 27 Javascript

javascript三种代码注释方法

Jun 02 Javascript

Vue框架中正确引入JS库的方法介绍

Jul 30 Javascript

three.js中文文档学习之通过模块导入

Nov 20 Javascript

使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

Jan 25 jQuery

总结js函数相关知识点

Feb 27 Javascript

小程序图片剪裁加旋转的示例代码

Jul 10 Javascript

JS中FormData类实现文件上传

Mar 27 Javascript

JavaScript监听一个DOM元素大小变化

Apr 26 Javascript

关于vue3默认把所有onSomething当作v-on事件绑定的思考

May 15 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

Session服务器配置指南与使用经验的深入解析

2013/06/17 PHP

PHP更安全的密码加密机制Bcrypt详解

2017/06/18 PHP

PHP 实现人民币小写转换成大写的方法及大小写转换函数

2017/11/17 PHP

php实现大文件断点续传下载实例代码

2019/10/01 PHP

一个JavaScript继承的实现

2006/10/24 Javascript

window.onload 加载完毕的问题及解决方案（上）

2009/07/09 Javascript

可编辑下拉框的2种实现方式

2014/06/13 Javascript

js获取域名的方法

2015/01/27 Javascript

javascript实时获取鼠标坐标值并显示的方法

2015/04/30 Javascript

javascript实现鼠标放上后下边对应内容变换的效果

2015/08/06 Javascript

jqueryMobile 动态添加元素,展示刷新视图的实现方法

2016/05/28 Javascript

jQuery使用ajax方法解析返回的json数据功能示例

2017/01/10 Javascript

数组Array的排序sort方法

2017/02/17 Javascript

js实现股票实时刷新数据案例

2017/05/14 Javascript

Angularjs的$http异步删除数据详解及实例

2017/07/27 Javascript

微信小程序分享功能之按钮button 边框隐藏和点击隐藏

2018/06/14 Javascript

Vue.js 十五分钟入门图文教程

2018/09/12 Javascript

bootstrap table表格插件之服务器端分页实例代码

2018/09/12 Javascript

小程序实现列表删除功能

2018/10/30 Javascript

微信小程序实现横向滚动导航栏效果

2019/12/12 Javascript

[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08

2020/11/11 DOTA

Python设计模式之观察者模式实例

2014/04/26 Python

利用python解决mysql视图导入导出依赖的问题

2017/12/17 Python

通过Python 获取Android设备信息的轻量级框架

2017/12/18 Python

python如何实现反向迭代

2018/03/20 Python

在Pycharm中对代码进行注释和缩进的方法详解

2019/01/20 Python

pytorch获取模型某一层参数名及参数值方式

2019/12/30 Python

python在不同条件下的输入与输出

2020/02/13 Python

韩国江南富人区高端时尚百货商场：Galleria（格乐丽雅）

2018/03/27 全球购物

Hotels.com加拿大：领先的在线住宿网站

2018/10/05 全球购物

毕业生优秀推荐信

2013/11/26 职场文书

优秀研究生自我鉴定

2013/12/04 职场文书

采购经理岗位职责

2014/02/16 职场文书

2014年护理工作总结范文

2014/11/14 职场文书

2014年教务处工作总结

2014/12/03 职场文书

致运动员加油稿

2015/07/21 职场文书