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

js 动态添加标签（新增一行，其实很简单，就是几个函数的应用）

Mar 26 Javascript

从父页面读取和操作iframe中内容方法

Jul 25 Javascript

jQuery页面图片伴随滚动条逐渐显示的小例子

Mar 21 Javascript

jQuery基本选择器选择元素使用介绍

Apr 18 Javascript

上传的js验证(图片/文件的扩展名)

Apr 25 Javascript

时间戳转换为时间年月日时间的JS函数

Aug 19 Javascript

toggle一个div显示或隐藏且可扩展成自定义下拉框

Sep 12 Javascript

Javascript非构造函数的继承

Apr 27 Javascript

JavaScript动态提示输入框输入字数的方法

Jul 27 Javascript

简单对比分析JavaScript中的apply,call与this的使用

Dec 04 Javascript

vue router 用户登陆功能的实例代码

Apr 24 Javascript

微信小程序实现同一页面取值的方法分析

Apr 30 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生成等比缩略图类和自定义函数分享

2014/06/25 PHP

ThinkPHP下表单令牌错误与解决方法分析

2017/05/20 PHP

js资料prototype 属性

2007/03/13 Javascript

div移动输入框不能输入的问题

2009/11/19 Javascript

jQuery EasyUI API 中文文档 - Tree树使用介绍

2011/11/19 Javascript

EasyUI 中 MenuButton 的使用方法

2012/07/14 Javascript

如何在JavaScript中实现私有属性的写类方式(二)

2013/12/04 Javascript

DOM基础教程之使用DOM

2015/01/19 Javascript

javascript实现textarea中tab键的缩排处理方法

2015/06/26 Javascript

jQuery在线选座位插件seat-charts特效代码分享

2015/08/27 Javascript

jquery点击改变class并toggle的实现代码

2016/05/15 Javascript

用jQuery实现优酷首页轮播图

2017/01/09 Javascript

vue.js的安装方法

2017/05/12 Javascript

jQuery实现的文字逐行向上间歇滚动效果示例

2017/09/06 jQuery

JS实现的base64加密解密操作示例

2018/04/18 Javascript

浅谈React碰到v-if

2018/11/04 Javascript

微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解

2019/05/14 Javascript

Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示

2019/06/26 Javascript

layui内置模块layim发送图片添加加载动画的方法

2019/09/23 Javascript

解决vue+ element ui 表单验证有值但验证失败问题

2020/01/16 Javascript

javascript设计模式 ? 原型模式原理与应用实例分析

2020/04/10 Javascript

JQuery省市联动效果实现过程详解

2020/05/08 jQuery

Python有序查找算法之二分法实例分析

2017/12/11 Python

使用Python设计一个代码统计工具

2018/04/04 Python

TensorFlow利用saver保存和提取参数的实例

2018/07/26 Python

Python import与from import使用及区别介绍

2018/09/06 Python

Python中应该使用%还是format来格式化字符串

2018/09/25 Python

Python编程在flask中模拟进行Restful的CRUD操作

2018/12/28 Python

Python多线程threading模块用法实例分析

2019/05/22 Python

python配置文件写入过程详解

2019/10/19 Python

Python Django中间件，中间件函数，全局异常处理操作示例

2019/11/08 Python

浅析Django中关于session的使用

2019/12/30 Python

深度学习入门之Pytorch 数据增强的实现

2020/02/26 Python

Python3标准库之dbm UNIX键-值数据库问题

2020/03/24 Python

货代行业个人求职简历的自我评价

2013/10/22 职场文书

微信小程序scroll-view不能左右滑动问题的解决方法

2021/07/09 Javascript