Angular每个组件,包含根组件和每一级的子组件,都存在一个生命周期,从创建,变更到销毁。Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力。

在Angular中,提供了8个生命周期钩子函数:

这8个生命周期钩子函数分为两类:第一类:指令与组件共有的钩子,第二类:只有组件才有的钩子

1. ngOnChanges:当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit之前。

范围:指令和组件,接口名称:OnChanges

ngOnchanges在父组件(初始化或修改)子组件的输入参数下调用,用在有输入属性的子组件。

用处:当Angular设置数据绑定输入属性发生变化时响应。

时机:当被绑定的输入属性的值发生变化时调用,不过首次调用是会发生在ngOnInit()之前的。

ngOnChanges()方法获取了一个对象,它可以同时观测1个/多个绑定的属性值,它把每个发生变化的属性名都映射到了一个SimpleChange对象, 该对象中有属性的当前值和前一个值。

触发条件

@input属性(输入属性)发生变化时,会调用。非此属性,不会调用。

当输入属性为对象时,当对象的属性值发生变化时,不会调用,当对象的引用变化时会触发。

输入属性,使用@Input装饰的属性,这里还需要注意不可变对象,在Angular中,典型的不可变对象是string类型,但所有自定义对象均为可变对象,如:user:{name:string},可变对象即使被定义为输入属性,也不会触发OnChanges方法。当修改子组件参数时,只有以下情况ngOnchanges才会被调用

子组件的参数为输入属性且为不可变对象变化时

输入属性:@Input()属性

不可变对象:原始值(undefined、null、布尔值、数字和字符串)

可变对象:对象(包括数组和函数)

可变对象

var greeting = 'hello';

greeting = 'hello world';

greeting 的值发生改变,因为其指向的字符串地址从‘hello’指向了‘hello world’

不可变对象

var user = {name:Tom};

user.name = "Jerry";

user的指向的内存地址并没有改变,改变的是user对象中的name属性

ngOnChanges 钩子接收一个类型为 SimpleChange 的映射对象,包括新值和旧值

2.ngOnInit : 在第一轮 ngOnChanges 完成之后调用。发生于构造函数之后,用于初始化指令/组件,主要用于数据绑定的输入属性处理。

( 说当每个输入属性的值都被触发了一次 ngOnChanges 之后才会调用 ngOnInit ,此时所有输入属性都已经有了正确的初始绑定值 )

范围:指令和组件,接口名称:OnInit

开发中我们经常在ngOnInit做一些初始化的工作,而这些工作尽量要避免在constructor中进行,constructor中应该只进行依赖注入而不是进行真正的业务操作。

3.ngDoCheck : 在每个 Angular 变更检测周期中调用。用于变更的检测

范围:指令和组件,接口名称:DoCheck

Angular的变更检测机制配合zone.js来实现,保证组件变化和页面变化同步,

浏览器中任何异步事件都会触发检测机制,

检测模版所有绑定属性,若改变则相应区域会被更新

需要注意的是:变更检测机制只会把组件属性的改变反应到模版上,不会改变组件值

Angular中,每个组件都有属于自己的变更检测器,当任何一个变更检测器检查到变化,zone.js会根据组件的变更检测策略来检查组件,以判断组件是否需要更新它的模版。

检查策略:

1.default

默认情况下所有组件都使用Default策略;

2.OnPush策略

如果所有组件都使用Default策略,不管变更发生在哪个组件上,zone.js会检测整个组件树,但会跳过使用OnPush策略的组件,OnPush策略的组件只有当其输入属性(即@Input)发生改变时,zone.js才会检测这个组件及其子组件。

4.ngAfterContentInit :当把内容投影进组件之后调用。

范围:组件,接口:AfterContentInit

5.ngAfterContentChecked : 每次完成被投影组件内容的变更检测之后调用。

范围:组件,接口:AfterContentChecked

6.ngAfterViewInit :初始化完组件视图及其子视图之后调用。

范围:组件,接口:AfterViewInit

7.ngAfterViewChecked:每次做完组件视图和子视图的变更检测之后调用。

范围:组件,接口:AfterViewChecked

8.ngOnDestroy : 当 Angular 每次销毁指令 / 组件之前调用。

范围:指令和组件,接口:OnDestroy

Angular生命周期理解的更多相关文章

  1. angular 生命周期钩子 ngOnInit() 和 ngAfterViewInit() 的区别

    angular 生命周期钩子的详细介绍在 https://angular.cn/guide/lifecycle-hooks  文档中做了介绍. ngOnInit() 在 Angular 第一次显示数据 ...

  2. JSP 生命周期 理解JSP底层功能的关键就是去理解它们所遵守的生命周期

    JSP 生命周期 理解JSP底层功能的关键就是去理解它们所遵守的生命周期. JSP生命周期就是从创建到销毁的整个过程,类似于servlet生命周期,区别在于JSP生命周期还包括将JSP文件编译成ser ...

  3. angularjs link compile与controller的区别详解,了解angular生命周期

     壹 ❀ 引 我在 angularjs 一篇文章看懂自定义指令directive 一文中简单提及了自定义指令中的link链接函数与compile编译函数,并说到两者具有互斥特性,即同时存在link与c ...

  4. activity学习(1) 生命周期理解

    可以忽略onWindowFocusChanged.onSaveInstanceState.onRestoreInstanceState几个事件,这几个事件官网中的生命周期里面没有提到.忽略掉这几个方法 ...

  5. angular生命周期

    概述 angular的组件及指令都有相应的声明周期: 创建, 更新, 销毁, 我们可以通过实现相应的生命周期钩子接口来进入相应的该声明周期的关键时刻 组件生命周期顺序 ngOnChanges: 当组件 ...

  6. maven生命周期理解

    你可以仅仅调用clean来清理工作目录,仅仅调用site来生成站点.当然你也可以直接运行 mvn clean install site 运行所有这三套生命周期. 知道了每套生命周期的大概用途和相互关系 ...

  7. Maven的构建生命周期理解

    以下引用官方的生命周期解释https://maven.apache.org/guides/introduction/introduction-to-the-lifecycle.html: 一.构建生命 ...

  8. Activity生命周期理解

    在Android应用程序运行时,Activity的活动状态由Android以Activity栈的形式管理,当前活动的Activity位于栈顶.随着应用程序之间的切换.关闭等,每个Activity都有可 ...

  9. [转] Actor生命周期理解

    [转] https://blog.csdn.net/wsscy2004/article/details/38875065 镇图:Actor内功心法图 Actor的生命周期可以用Hooks体现和控制,下 ...

随机推荐

  1. Bzoj 1997 [Hnoi2010]Planar题解

    1997: [Hnoi2010]Planar Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 2224  Solved: 824[Submit][Stat ...

  2. Element ui colorpicker在Vue中的使用

    首先要有一个color-picker组件 <el-color-picker v-model="headcolor"></el-color-picker> 在 ...

  3. 比赛:小奔的方案 solution

    题目 题目背景 有一个著名的题目: 五个海盗抢到了100个金币,每一颗都一样的大小和价值连城. 他们决定这么分: 1.抽签决定自己的号码 ------ [1.2.3.4.5] 2.首先,由1号提出分配 ...

  4. 洛谷P2299 Mzc和体委的争夺战 题解

    题目 题目描述 mzc家很有钱(开玩笑),他家有n个男家丁(做过前三弹的都知道).但如此之多的男家丁吸引来了我们的体委(矮胖小伙),他要来与mzc争夺男家丁. mzc很生气,决定与其决斗,但cat的体 ...

  5. 题解 P2272 【[ZJOI2007]最大半连通子图】

    P2272 [ZJOI2007]最大半连通子图 萌新初学Tarjan,在<信息学奥赛一本通-提高篇>中看到这题,看到题解不多,便想发布一篇较为清新简洁的题解.--第5道紫题 题目大意: 定 ...

  6. Storm基础知识学习

    概述 Storm是一个免费开源的分布式实时计算系统.Storm能轻松可靠地处理无界的数据流,就像Hadoop对数据进行批处理 编程模型 spout:数据读取数据.接收数据.将数据写出到blot bol ...

  7. c语言进阶11-经典算法代码

    重要算法一览 #include "stdio.h" #include "stdio.h" void main() { int a,b,c,i,n; int x, ...

  8. cesium 学习(四) Hello World

    一.前言 之前的文章都是基础,搭建环境.部署Cesium.学习资料等等.现在简单入手,一个Hello World页面开发. 二.Hello World 感觉Hello World没有什么特别需要讲的, ...

  9. HTTP,TCP,IP详解

    互联网协议包含了上百种协议标准,但是最重要的两个协议是TCP和IP协议,所以,大家把互联网的协议简称TCP/IP协议. 通信的时候,双方必须知道对方的标识,好比发邮件必须知道对方的邮件地址.互联网上每 ...

  10. SSM框架实现原理图(转)