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

自适应图片大小的弹出窗口

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