lifecycle hook angular
Trong Angular, các lifecycle hooks cho phép bạn “nhúng” logic vào các thời điểm cụ thể trong vòng đời của một thành phần hoặc chỉ thị. Dưới đây là danh sách các lifecycle hooks cùng với mô tả ngắn gọn về từng hook:
- ngOnChanges(changes: SimpleChanges):
- Được gọi khi một hoặc nhiều thuộc tính ràng buộc dữ liệu của thành phần thay đổi.
- Hook này được gọi đầu tiên trước các hooks khác (trừ constructor).
- ngOnInit():
- Được gọi một lần duy nhất sau khi Angular đã khởi tạo tất cả các thuộc tính ràng buộc dữ liệu của thành phần.
- Đây là nơi bạn có thể đặt logic khởi tạo cho thành phần của mình.
- ngDoCheck():
- Được gọi trong mỗi chu kỳ phát hiện thay đổi. Bạn có thể sử dụng hook này để kiểm tra các thay đổi mà Angular không thể hoặc không phát hiện được.
- ngAfterContentInit():
- Được gọi sau khi Angular đã khởi tạo xong tất cả các nội dung được nhúng trong thành phần (qua ng-content).
- ngAfterContentChecked():
- Được gọi sau mỗi lần Angular kiểm tra nội dung được nhúng trong thành phần.
- ngAfterViewInit():
- Được gọi sau khi Angular khởi tạo xong chế độ xem của thành phần và các chế độ xem con của nó.
- ngAfterViewChecked():
- Được gọi sau mỗi lần Angular kiểm tra chế độ xem của thành phần và các chế độ xem con của nó.
- ngOnDestroy():
- Được gọi ngay trước khi Angular phá hủy thành phần.
- Đây là nơi bạn có thể hủy các đăng ký, hủy bộ đếm thời gian hoặc thực hiện bất kỳ công việc dọn dẹp nào khác.
Dưới đây là một ví dụ ngắn về cách sử dụng các lifecycle hooks trong một thành phần Angular:
typescript
import {
Component,
OnInit,
OnChanges,
DoCheck,
AfterContentInit,
AfterContentChecked,
AfterViewInit,
AfterViewChecked,
OnDestroy,
SimpleChanges,
} from '@angular/core';
@Component({
selector: 'app-lifecycle-demo',
template: `<p>Lifecycle demo component</p>`,
})
export class LifecycleDemoComponent implements OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {
constructor() {
console.log('Constructor');
}
ngOnChanges(changes: SimpleChanges): void {
console.log('ngOnChanges', changes);
}
ngOnInit(): void {
console.log('ngOnInit');
}
ngDoCheck(): void {
console.log('ngDoCheck');
}
ngAfterContentInit(): void {
console.log('ngAfterContentInit');
}
ngAfterContentChecked(): void {
console.log('ngAfterContentChecked');
}
ngAfterViewInit(): void {
console.log('ngAfterViewInit');
}
ngAfterViewChecked(): void {
console.log('ngAfterViewChecked');
}
ngOnDestroy(): void {
console.log('ngOnDestroy');
}
}
Khi bạn chạy thành phần này, bạn sẽ thấy thứ tự các hook được gọi trong console log. Đây là cách mà Angular quản lý vòng đời của một thành phần và cho phép bạn nhúng logic tại các điểm khác nhau trong quá trình đó.
