1. 说明
Angular
每个组件都存在一个生命周期,从创建,变更到销毁。Angular
提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力。
2. 接口
按照生命周期执行的先后顺序,Angular
生命周期接口如下所示
名称 | 时机 | 接口 | 范围 |
---|---|---|---|
ngOnChanges | 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit之前。 | OnChanges | 指令和组件 |
ngOnInit | 在第一轮 ngOnChanges 完成之后调用。 ( 译注:也就是说当每个输入属性的值都被触发了一次 ngOnChanges 之后才会调用 ngOnInit ,此时所有输入属性都已经有了正确的初始绑定值 ) | OnInit | 指令和组件 |
ngDoCheck | 在每个 Angular 变更检测周期中调用。 | DoCheck | 指令和组件 |
ngAfterContentInit | 当把内容投影进组件之后调用。 | AfterContentInit | 组件 |
ngAfterContentChecked | 每次完成被投影组件内容的变更检测之后调用。 | AfterContentChecked | 组件 |
ngAfterViewInit | 初始化完组件视图及其子视图之后调用。 | AfterViewInit | 组件 |
after initializing the component’s views and child views. | |||
ngAfterViewChecked | 每次做完组件视图和子视图的变更检测之后调用。 | AfterViewChecked | 组件 |
ngOnDestroy | 当 Angular 每次销毁指令 / 组件之前调用。 | OnDestroy | 指令和组件 |
3. 示例
我们用一个示例展示一些常用的生命周期函数的用法,主要包括ngOnChanges
,ngOnInit
,ngDoCheck
,ngOnDestroy
,实现的示例代码如下:
birthday
组件中实现了对应的生命周期函数,并在App
组件中调用
import { Component, Input, OnChanges, OnInit, DoCheck, OnDestroy } from '@angular/core';
@Component({
moduleId: 'birthday',
selector: 'birthday',
template: `
<h5>your birthday is {{birthday}}</h5>
`,
})
export class BirthdayComponent implements OnChanges, OnInit, DoCheck, OnDestroy {
@Input()
birthday;
ngOnChanges(changes) {
console.log('ngOnChanges');
}
ngOnInit() {
console.log('ngOnInit');
}
ngDoCheck() {
console.log('ngDoCheck');
}
ngOnDestroy() {
console.log('ngOnDestroy');
}
}
@Component({
moduleId: 'app',
selector: 'app',
template: `
<birthday [birthday]="birthday"></birthday>
`,
directives: [BirthdayComponent]
})
export class AppComponent {
birthday: Date = new Date(2012, 10, 10);
}
在Chrome
中运行,得到的结果如下,可以清楚的看到按照ngOnChanges
,ngOnInit
,ngDoCheck
的顺序执行,当组件销毁时会调用ngOnDestroy
。