测试生命周期顺序的代码

import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';@Component({selector: 'panel',inputs: ['title', 'caption'],template: ''
})
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或者ContentchildrenngAfterContentInit() {console.log('After content init');}// 组件内容脏检查完成ngAfterContentChecked() {console.log('After content checked');}// 组件视图初始化完成 PS：指的是ViewChild或者ViewChildrenngAfterViewInit() {console.log('After view init');}// 组件视图脏检查完成之后ngAfterViewChecked() {console.log('After view checked');}
}@Component({selector: 'app',template: `"toggle()">Toggle"counter % 2 == 0">"Sample caption" title="Sample">Hello world!`,directives: [Panel]
})
class App {counter: number = 0;toggle() {this.counter += 1;}
}bootstrap(App);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

输出结果

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！