欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-29 08:01:32
angular每个组件都存在一个生命周期,从创建,变更到销毁。angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力,掌握生命周...

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

概述

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

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

生命周期执行顺序

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生命周期钩子函数的详细介绍

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

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