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的指向的内存地址并没有改变,改变的是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