前言
在 Angular 中，每個 Component 和 Directive 都有生命週期，由一系列的生命週期 Hook 所組成。理解這些生命週期鉤子函數，可以讓你在適當的時機執行特定的邏輯。
LifeCycle Hook Function
LifeCycle Hook Function 讓開發者在 Component 和 Directive 的不同階段進行操作。
Angular LifeCycle Hook
constructor：ES6 提供給 class 的建構子，並不屬於 AngularngOnChanges：當 Component 的一個輸入屬性發生變化時調用ngOnInit：當 Component 初始化完成時調用，此時 Component 的輸入屬性和輸出屬性都已經確定ngDoCheck：當 Angular 檢查 Component 的變化時調用，通常是由於輸入屬性發生變化或因為事件觸發引起的ngAfterContentInit：當 Component 的 Content 完成初始化之後調用，通常用於對 Component 的 Content 執行操作ngAfterContentChecked：當 Angular 檢查 Component 的 Content 發生變化時調用ngAfterViewInit：當 Component 的 View 完成初始化之後調用，通常用於對 Component 的 View 執行操作ngAfterViewChecked：當 Angular 檢查 Component 的 View 發生變化時調用ngOnDestroy：當 Component 被摧毀時調用，通常用於釋放 Component 所占用的資源
生命週期執行順序
完整的生命週期執行順序如下：
- constructor：建立 Component 實例
- ngOnChanges：輸入屬性變更時（首次也會執行）
- ngOnInit：Component 初始化完成
- ngDoCheck：變更檢測
- ngAfterContentInit：外部內容初始化完成
- ngAfterContentChecked：外部內容變更檢測
- ngAfterViewInit：視圖初始化完成
- ngAfterViewChecked：視圖變更檢測
- ngOnDestroy：Component 銷毀前
常用生命週期範例
ngOnInit
最常使用的生命週期 Hook，通常用於初始化資料。
export class UserComponent implements OnInit {
users: User[] = [];
constructor(private userService: UserService) {}
ngOnInit(): void {
// 在這裡初始化資料
this.loadUsers();
}
loadUsers(): void {
this.userService.getUsers().subscribe((users) => (this.users = users));
}
}
ngOnChanges
當 @Input() 屬性值改變時觸發。
export class ChildComponent implements OnChanges {
@Input() data: string;
ngOnChanges(changes: SimpleChanges): void {
console.log("Previous value:", changes["data"].previousValue);
console.log("Current value:", changes["data"].currentValue);
}
}
ngOnDestroy
Component 銷毀前執行，通常用於清理資源、取消訂閱。
export class MyComponent implements OnInit, OnDestroy {
private subscription: Subscription;
ngOnInit(): void {
this.subscription = this.dataService
.getData()
.subscribe((data) => console.log(data));
}
ngOnDestroy(): void {
// 取消訂閱，避免記憶體洩漏
if (this.subscription) {
this.subscription.unsubscribe();
}
}
}
ngAfterViewInit
視圖初始化完成後執行，可以安全地訪問 DOM 元素。
export class MyComponent implements AfterViewInit {
@ViewChild("myInput") myInput: ElementRef;
ngAfterViewInit(): void {
// 這時可以安全地訪問 DOM 元素
this.myInput.nativeElement.focus();
}
}
constructor vs ngOnInit
很多人會疑惑：什麼時候用 constructor，什麼時候用 ngOnInit？
constructor
- ES6 的 class 建構子
- 用於依賴注入（Dependency Injection）
- 此時 Component 的屬性可能還未初始化
- 不應該在這裡執行複雜的邏輯或 HTTP 請求
constructor(
private userService: UserService,
private router: Router
) {
// 只做簡單的初始化
console.log('Component created');
}
ngOnInit
- Angular 的生命週期 Hook
- Component 的輸入屬性已經初始化完成
- 應該在這裡執行資料載入、訂閱等操作
ngOnInit(): void {
// 執行資料初始化
this.loadData();
}
實用技巧
1. 使用 OnPush 策略優化效能
搭配 ngOnChanges 使用 ChangeDetectionStrategy.OnPush 可以提升效能。
@Component({
selector: "app-my-component",
templateUrl: "./my-component.component.html",
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyComponent implements OnChanges {
@Input() data: any;
ngOnChanges(changes: SimpleChanges): void {
// 只有當 input 改變時才會觸發變更檢測
}
}
2. 避免在 ngDoCheck 中執行繁重操作
ngDoCheck 會在每次變更檢測時執行，頻率非常高，應避免執行繁重的操作。
3. 記得取消訂閱
在 ngOnDestroy 中取消所有訂閱，避免記憶體洩漏。
private destroy$ = new Subject<void>();
ngOnInit(): void {
this.dataService.getData()
.pipe(takeUntil(this.destroy$))
.subscribe(data => console.log(data));
}
ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
}
總結
理解 Angular 的生命週期 Hook 是開發 Angular 應用的關鍵：
- ngOnInit：最常用，用於初始化資料
- ngOnChanges：監聽 Input 屬性變化
- ngOnDestroy：清理資源，避免記憶體洩漏
- ngAfterViewInit：訪問 DOM 元素
- constructor vs ngOnInit：constructor 用於依賴注入，ngOnInit 用於資料初始化
掌握這些生命週期 Hook 的執行順序和調用時機，能夠更好地理解 Angular 中 Component 和 Directive 的運行機制，寫出更高效且穩定的應用程式。