Trong Angular, vòng đời của một component hay directive được quản lý thông qua một loạt các móc vòng đời (lifecycle hooks). Những móc này cho phép bạn can thiệp vào các giai đoạn khác nhau trong quá trình khởi tạo, cập nhật và phá hủy của component. Dưới đây là các giai đoạn chính trong vòng đời của một component cùng với các phương thức tương ứng.
Trình tự vòng đời
Vòng đời của một component trong Angular có thể được chia thành các giai đoạn sau:
- Khởi tạo: Bắt đầu khi component được tạo ra.
- Cập nhật: Xảy ra khi có sự thay đổi trong dữ liệu hoặc trạng thái của component.
- Phá hủy: Diễn ra khi component không còn cần thiết và bị loại bỏ khỏi DOM.
Các móc vòng đời
Dưới đây là các móc vòng đời chính mà bạn có thể sử dụng trong Angular:
-
ngOnChanges:
- Được gọi khi có sự thay đổi trong các thuộc tính đầu vào (input properties) của component. Móc này cho phép bạn nhận biết và xử lý các thay đổi ngay lập tức.
-
ngOnInit:
- Được gọi một lần duy nhất sau khi component đã được khởi tạo. Đây là nơi lý tưởng để thực hiện các tác vụ khởi tạo, như lấy dữ liệu từ server.
-
ngDoCheck:
- Được gọi khi Angular thực hiện kiểm tra thay đổi. Móc này cho phép bạn thực hiện kiểm tra tùy chỉnh để phát hiện các thay đổi mà Angular không tự động nhận biết.
-
ngAfterContentInit:
- Được gọi sau khi Angular đã khởi tạo nội dung của component. Đây là thời điểm bạn có thể xử lý các nội dung được nhúng vào component.
-
ngAfterContentChecked:
- Được gọi sau khi nội dung của component đã được kiểm tra. Móc này cho phép bạn thực hiện các hành động cần thiết sau khi nội dung đã được cập nhật.
-
ngAfterViewInit:
- Được gọi sau khi view của component và các view con đã được khởi tạo. Đây là nơi bạn có thể truy cập các phần tử DOM thông qua @ViewChild.
-
ngAfterViewChecked:
- Được gọi sau khi view của component và các view con đã được kiểm tra. Móc này cho phép bạn thực hiện các hành động cần thiết sau khi view đã được cập nhật.
-
ngOnDestroy:
- Được gọi ngay trước khi Angular phá hủy component. Đây là nơi bạn nên thực hiện các công việc dọn dẹp, như hủy đăng ký các observable hoặc các sự kiện để tránh rò rỉ bộ nhớ.
Ví dụ minh họa
Dưới đây là một ví dụ đơn giản về cách sử dụng các móc vòng đời trong một component Angular:
typescript
import { Component, OnInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-example',
template: `<p>Example Component</p>`
})
export class ExampleComponent implements OnInit, OnDestroy, OnChanges {
constructor() {
console.log('Constructor: Component is being created');
}
ngOnChanges(changes: SimpleChanges) {
console.log('ngOnChanges: Changes detected', changes);
}
ngOnInit() {
console.log('ngOnInit: Component initialized');
}
ngOnDestroy() {
console.log('ngOnDestroy: Component is being destroyed');
}
}Trong ví dụ này, bạn có thể thấy cách mà các phương thức vòng đời được gọi trong quá trình khởi tạo và phá hủy của component.
Hiểu rõ vòng đời của components trong Angular giúp bạn tối ưu hóa mã nguồn và quản lý trạng thái của ứng dụng một cách hiệu quả. Bằng cách sử dụng các móc vòng đời một cách hợp lý, bạn có thể can thiệp vào quá trình khởi tạo, cập nhật và dọn dẹp, từ đó nâng cao hiệu suất và trải nghiệm người dùng.
