Angular生命周期理解

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

 

转载于:https://www.cnblogs.com/liquanjiang/p/10031971.html