Angular中的元件(component)啟動的時候，分別會觸發兩個事件
- constructor:是javascript中class產生出來時候會執行的建構式
- ngOnInit:則是Angular眾多生命週期中的其中之一，會在元件(component)啟動的時候觸發，
元件啟動順序:constructor > ngOnInit
src/app/app.component.ts
引入 OnInit
constructor()與ngOnInit（）console.log(出現順序)
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
| import { Component, OnInit } from '@angular/core';
import { RouterOutlet ,RouterLink} from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [
RouterOutlet,
RouterLink
],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
constructor() {
console.log('constructor啟動了')
}
ngOnInit(): void {
console.log('ngOnInit啟動了')
}
title = 'tode_project';
}
|
測試結果順序結果：
constructor啟動了
ngOnInit啟動了
元件啟動順序:constructor > ngOnInit
定義變數值，變數顯示在頁面上順序:
normalValue的值:從ngOnInit取值 >
constructor的值:從constructor取值 >
ngOnInit的值:從ngOnInit取值
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
| import { Component, OnInit } from '@angular/core';
import { RouterOutlet ,RouterLink} from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [
RouterOutlet,
RouterLink
],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
normalValue='noValue'
constructorValue="noValue"
ngOnInitValue="noValue"
constructor() {
console.log('constructor啟動了')
this.constructorValue='從constructor取值'
this.normalValue='從constructor取值'
}
ngOnInit(): void {
console.log('ngOnInit啟動了');
this.ngOnInitValue='從ngOnInit取值'
this.normalValue='從ngOnInit取值'
}
title = 'tode_project';
}
|
測試渲染結果順序結果：
normalValue的值:從ngOnInit取值
constructor的值:從constructor取值
ngOnInit的值:從ngOnInit取值
測試渲染結果
結果：
不論在constructor或在ngOnInit賦值都是沒有問題的。
如果在constructor和ngOnInit連續賦值的話，就會依照小結一的結論照順序賦值，最後得到ngOnInit給予的值。