浅谈angular2 组件的生命周期钩子
本文介绍了浅谈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);
输出结果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。