当前位置:首页 > 日记 > 正文

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

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

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

概述

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


生命周期执行顺序

nnChanges

在有输入属性的情况下才会调用,该方法接受当前和上一属性值的SimpleChanges对象。如果有输入属性,会在nnInit之前调用。

nnInit

在组件初始化的时候调用,只调用一次,在第一次调用nnChanges之后调用

ngDoCheck

在组件定义的属性或方法变更时调用(用于脏值之检测,非常耗性能,因为会把所有的属性和方法都检测一遍),会在nnChanges()和nnInit()之后

ngAfterContentInit

在组件内容初始化之后调用,在第一次ngDoCheck之后调用,只调用一次

ngAfterContentChecked

在组件每次检查内容放生变更时调用。在ngAfterContentInit和每次ngDoCheck之后调用

ngAfterViewInit

在组件相应的视图初始化之后调用,第一次ngAfterContentChecked之后调用,只调用一次

ngAfterViewChecked

在组件每次检查视图发生变更时调用。ngAfterViewInit和每次ngAfterContentChecked之后调用。

nnDestroy

在组件销毁前调用,做一些清理工作,比如退订可观察对象和移除事件处理器,以免导致内存泄漏。


上面代码书写是按顺序的,看下面控制台打印


现在我们钩子函数的顺序打乱,在看看代码


控制台输出跟上面是一样的


constructor和nnInit

constructor是ES6中class中新增的属性,当class类实例化的时候调用constructor,来初始化类。Angular中的组件就是基于class类实现的,在Angular中,constructor用于注入依赖。


nnInit是Angular中生命周期的一部分,在constructor后执行。在Angular中用于初始化变量和数据绑定等


NgChanges

当我们监听了OnChanges钩子。 一旦检测到该组件(或指令)的输入属性发生了变化,Agular就会调用nnChanges()方法


效果演示


DoCheck

当组件中属性或函数发生变化时DoCheck会执行脏值检测,遍历所有变量


效果演示


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

感谢阅读,希望能帮助到大家,也希望大家多多支持!

相关文章

Easyui在treegrid添加控件的实现方

Easyui在treegrid添加控件的实现方

方法,控件,电脑软件,Easyui,treegrid, easyui 树加控件最近看了一个easy感觉里面的树搞得还不错,虽然觉得让人有点不灵活的感觉,我们来说说怎么在树种添加控件效果在书中添加需要用到formatter这个属性,可以在加载的时候显示function formatPr…

React操作真实DOM实现动态吸底部的

React操作真实DOM实现动态吸底部的

动态,操作,示例,真实,电脑软件,动态吸底:开始时fixed在页面上,当页面滚动到距离底部一定距离的时fixed部分固定。这个是需要计算页面滚动距离的,如果使用Jquery或者原生js实现是非常好实现的,但是由于使用react并不推崇操作DOM,但是如果使用virt…

删除table表格行的实例讲解

删除table表格行的实例讲解

删除,表格,实例,电脑软件,table,实例如下:function getRowObj(obj){ while(obj.tagName.toLowerCase()!="tr") // toLowerCase转化小写 { obj=obj.parentNode; } // 得到父节点 return obj;}function sc(obj) // sc为点击事件{ var…

Photoshop设计超质感的橙色立体风

Photoshop设计超质感的橙色立体风

网页,橙色,质感,按钮,风格,button按钮作为网页设 UI设计中重要的一步也是最基础的一步,对设计来说有着重要的作用,按钮是否精致、是否和整体网页、UI相配合,对设计的好与坏有着很大的影响。近几年扁平化简洁化的趋势下,按钮越来越简单,但是不是…

利用vue+elementUI实现部分引入组

利用vue+elementUI实现部分引入组

方法,组件,详解,电脑软件,vue,前言vue.js的UI组件库,在git上有多个项目,我见的使用者比较多的是iView和Element.两个组件库,组件都很丰富。官网的介绍 iView: 一套基于 Vue.js 的高质量 UI 组件库 Element,一套为开发者、设计师和产品经理准…

Git提交文件到三个区的实现方法

Git提交文件到三个区的实现方法

提交,方法,文件,电脑软件,Git,大致介绍年过的差不多了,开始学习!Git有三个工作区域:◆ 工作区(Working Directory)◆ 暂存区(Stage)◆ 版本库(Repository)工作区(Working Directory)简单理解就是需要进行版本的某个文件夹,例如之前例子中的2048文件夹暂…

jquery中绑定事件的异同

jquery中绑定事件的异同

绑定事件,异同,电脑软件,jquery,谈论jquery中bind(),live(),delegate(),on()绑定事件方式1. Bind()$(selector).bind(event,data,function)Event:必须项;添加到元素的一个或多个事件。Data:可选;需要传递的参数Function:必需;当绑定事件发生时…

带你快速理解javascript中的事件模

带你快速理解javascript中的事件模

事件模型,带你,快速,电脑软件,javascript,javascript中有两种事件模型:DOM0,DOM2。而对于这两种的时间模型,我一直不是非常的清楚,现在通过网上查阅资料终于明白了一些。一. DOM0级事件模型DOM0级事件模型是早期的事件模型,所有的浏览器都是支…

excel 计算常数以E为底的指数函数

excel 计算常数以E为底的指数函数

教程,计算,指数函数,数以,电脑软件,  在Excel中经常需要用到公式函数进行数据统计,其中一个计算以E为底的指数函数,虽然不常用,但学到的也是自己掌握的,接下来是小编为大家带来的excel 计算常数以E为底的指数函数教程,供大家参考。excel 计算…

PHP 信号管理知识整理汇总

PHP 信号管理知识整理汇总

信号,管理知识,电脑软件,PHP,SIGQUIT 建立CORE文件终止进程,并且生成core文件SIGILL 建立CORE文件 非法指令SIGTRAP 建立CORE文件 跟踪自陷SIGBUS 建立CORE文件 总线错误SIGSEGV 建立CORE文件 段…

Jquery中.bind | 、.live | 、.del

Jquery中.bind | 、.live | 、.del

详解,区别,电脑软件,bind,Jquery,简介最近了解到很多网页开发者对jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑。这些疑惑通常是关于它们之间真正的区别是什么啊,什么时候该使用它们啊。下面本文将给大家详细介绍这…

cdr怎么给制作水彩画效果?

cdr怎么给制作水彩画效果?

水彩画,效果,电脑软件,cdr,cdr中想要制作水彩画效果的图片,该怎么制作呢?下面我们就来看看详细的教程。软件名称:CorelDRAW X6 官方简体中文精简绿色便携版软件大小:176MB更新时间:2016-03-181、打开CorelDRAW软件,新建一个空白的文件,鼠标左键单…