angular2 组件的生命周期钩子
按照生命周期执行的先后顺序,Angular生命周期接口如下所示
生命周期顺序简写在Angular通过构造函数创建组件/指令时,它调用这些生命周期钩子方法的顺序是: ngOnChanges:在ngOnInit之前,当数据绑定输入属性的值发生变化时。 测试生命周期顺序的代码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);
输出结果(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- MVC5 + EF6 + Bootstrap3 (14) 分部视图PartialV
- 支持Angular4好用的文件上传组件ng2-file-upload
- Angular2(或TypeScript)中的“声明或语句预期”错
- Scala成语通过多个标准排序
- bootstrap中的tooltip
- shell教程-001:shell简介 什么是shell,shell命
- 什么是app.run(appRun);用于AngularJS?
- angular4 http RxJS Observable observer演示
- angularjs – 如何在ng-grid中使用ExternalSorti
- scala spark-streaming整合kafka (spark 2.3 ka