本文介绍了浅谈angular2 组件的生命周期钩子，分享给大家，具体如下：
按照生命周期执行的先后顺序，Angular生命周期接口如下所示
|
名称
|
时机
|
接口
|
范围
|
|
ngOnChanges
|
当被绑定的输入属性的值发生变化时调用，首次调用一定会发生在 ngOnInit之前。
|
OnChanges
|
指令和组件
|
|
ngOnInit
|
在第一轮 ngOnChanges 完成之后调用。 ( 译注：也就是说当每个输入属性的值都被触发了一次 ngOnChanges之后才会调用 ngOnInit ，此时所有输入属性都已经有了正确的初始绑定值 )
|
OnInit
|
指令和组件
|
|
ngDoCheck
|
在每个 Angular 变更检测周期中调用。
|
DoCheck
|
指令和组件
|
|
ngAfterContentInit
|
当把内容投影进组件之后调用。
|
AfterContentInit
|
组件
|
|
ngAfterContentChecked
|
每次完成被投影组件内容的变更检测之后调用。
|
AfterContentChecked
|
组件
|
|
ngAfterViewInit
|
初始化完组件视图及其子视图之后调用。
after initializing the component's views and child views.
|
AfterViewInit
|
组件
|
|
ngAfterViewChecked
|
每次做完组件视图和子视图的变更检测之后调用。
|
AfterViewChecked
|
组件
|
|
ngOnDestroy
|
当 Angular 每次销毁指令 /组件之前调用。
|
OnDestroy
|
指令和组件
|
生命周期顺序简写
在Angular通过构造函数创建组件/指令时，它调用这些生命周期钩子方法的顺序是：
- ngOnChanges：在ngOnInit之前，当数据绑定输入属性的值发生变化时。
- ngOnInit：在第一次ngOnChanges之后。
- ngDoCheck：每次Angular变化检测时。
- ngAfterContentInit：在外部内容放到组件内之后。
- ngAfterContentChecked：在放到组件内的外部内容每次检查之后。
- ngAfterViewInit：在初始化组件视图和子视图之后。
- ngAfterViewChecked：在妹子组件视图和子视图检查之后。
- ngOnDestroy：在Angular销毁组件/指令之前。
除此之外，一些组件还提供了自己的生命周期钩子。例如router有routerOnActivate。
测试生命周期顺序的代码
import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
@Component({
selector: 'panel',
inputs: ['title', 'caption'],
template: '<ng-content></ng-content>'
})
class Panel {
// 组件输入属性值发生改变（首次调用一定会发生在 ngOnInit之前。）
ngOnChanges(changes) {
console.log('On changes', changes);
}
// 组件初始化完成（在第一轮 ngOnChanges 完成之后调用。 ( 译注：也就是说当每个输入属性的值都被触发了一次 ngOnChanges 之后才会调用 ngOnInit ，此时所有输入属性都已经有了正确的初始绑定值 )）
ngOnInit() {
console.log('Initialized');
console.warn('OnChanges和DoCheck钩子不要同时出现，互斥！。本例仅供学习');
}
// 脏值检测器被调用后调用
ngDoCheck() {
console.log('Do check');
}
// 组件销毁之前
ngOnDestroy() {
console.log('Destroy');
}
// 组件-内容-初始化完成 PS：指的是ContentChild或者Contentchildren
ngAfterContentInit() {
console.log('After content init');
}
// 组件内容脏检查完成
ngAfterContentChecked() {
console.log('After content checked');
}
// 组件视图初始化完成 PS：指的是ViewChild或者ViewChildren
ngAfterViewInit() {
console.log('After view init');
}
// 组件视图脏检查完成之后
ngAfterViewChecked() {
console.log('After view checked');
}
}
@Component({
selector: 'app',
template: `
<button (click)="toggle()">Toggle</button>
<div *ngIf="counter % 2 == 0">
<panel caption="Sample caption" title="Sample">Hello world!</panel>
</div>
`,
directives: [Panel]
})
class App {
counter: number = 0;
toggle() {
this.counter += 1;
}
}
bootstrap(App);
输出结果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持天达云。