Component Lifecycle
Ba giai đoạn là: creates, updates, and destroys.
Một cá thể thành phần có vòng đời bắt đầu khi Angular khởi tạo lớp thành phần và hiển thị chế độ xem thành phần cùng với các chế độ xem con của nó. Vòng đời tiếp tục với tính năng phát hiện thay đổi, vì Angular kiểm tra xem khi nào các thuộc tính liên kết dữ liệu thay đổi và cập nhật cả chế độ xem và cá thể thành phần nếu cần. Vòng đời kết thúc khi Angular phá hủy cá thể thành phần và xóa mẫu được kết xuất của nó khỏi DOM. Các lệnh có vòng đời tương tự như Angular: tạo, cập nhật và hủy các thể hiện trong quá trình thực thi.
Component Lifecycle Hook
Phản hồi các sự kiện trong vòng đời của một thành phần hoặc chỉ thị bằng cách triển khai một hoặc nhiều giao diện móc vòng đời trong thư viện lõi Angular. Các hook cung cấp cho bạn cơ hội để hành động trên một đối tượng thành phần hoặc chỉ thị vào thời điểm thích hợp, khi Angular tạo, cập nhật hoặc hủy đối tượng đó.
Sau khi ứng dụng của bạn khởi tạo một thành phần hoặc chỉ thị bằng cách gọi phương thức khởi tạo của nó, Angular sẽ gọi các phương thức hook mà bạn đã triển khai tại điểm thích hợp trong vòng đời của cá thể đó.
Angular thực thi các phương thức hook trong trình tự sau. Sử dụng chúng để thực hiện các loại hoạt động sau.
Sau khi nội dung thành phần được khởi tạo. Phản hồi sau khi Angular chiếu nội dung bên ngoài vào dạng xem của thành phần hoặc vào dạng xem có chỉ thị. Được gọi một lần sau ngDoCheck () đầu tiên.
| STT | hook method | Details |
|---|---|---|
| 1 | ngOnChanges |
Khi một giá trị ràng buộc đầu vào hoặc đầu ra thay đổi. Phản hồi khi Angular đặt hoặc đặt lại các thuộc tính đầu vào ràng buộc dữ liệu. Điều này xảy ra thường xuyên, vì vậy bất kỳ thao tác nào bạn thực hiện ở đây đều ảnh hưởng đáng kể đến hiệu suất. Được gọi trước ngOnInit () (nếu thành phần có đầu vào ràng buộc) và bất cứ khi nào một hoặc nhiều thuộc tính đầu vào ràng buộc dữ liệu thay đổi. |
| 2 | ngOnInit |
Sau ngOnChanges đầu tiên. Khởi tạo chỉ thị hoặc thành phần sau khi Angular lần đầu tiên hiển thị các thuộc tính liên kết dữ liệu và thiết lập các thuộc tính đầu vào của chỉ thị hoặc thành phần. Được gọi một lần, sau ngOnChanges () đầu tiên. ngOnInit () vẫn được gọi ngay cả khi ngOnChanges () không được gọi (trường hợp này không có đầu vào liên kết mẫu). |
| 3 | ngDoCheck |
Phát hiện thay đổi tùy chỉnh của nhà phát triển. Phát hiện và hành động theo những thay đổi mà Angular không thể hoặc sẽ không tự phát hiện. Được gọi ngay sau ngOnChanges () trong mỗi lần chạy phát hiện thay đổi và ngay sau ngOnInit () trong lần chạy đầu tiên. |
| 4 | ngAfterContentInit |
Sau khi nội dung thành phần được khởi tạo. Phản hồi sau khi Angular chiếu nội dung bên ngoài vào dạng xem của thành phần hoặc vào dạng xem có chỉ thị. Được gọi một lần sau ngDoCheck () đầu tiên. |
| 5 | ngAfterContentChecked |
Sau mỗi lần kiểm tra nội dung thành phần. Phản hồi sau khi Angular kiểm tra nội dung được chiếu vào chỉ thị hoặc thành phần. Được gọi sau ngAfterContentInit () và mọi ngDoCheck () tiếp theo. |
| 6 | ngAfterViewInit |
Sau khi các khung nhìn của một thành phần được khởi tạo. Phản hồi sau khi Angular khởi tạo các khung nhìn của thành phần và các khung nhìn con, hoặc khung nhìn có chứa chỉ thị. Được gọi một lần sau ngAfterContentChecked () đầu tiên. |
| 7 | ngAfterViewChecked |
Sau mỗi lần kiểm tra các chế độ xem của một thành phần. Phản hồi sau khi Angular kiểm tra chế độ xem của thành phần và chế độ xem con hoặc chế độ xem có chứa chỉ thị. Được gọi sau ngAfterViewInit () và mọi ngAfterContentChecked () tiếp theo. |
| 8 | ngOnDestroy |
Just before the directive is destroyed. Cleanup just before Angular destroys the directive or component. Unsubscribe Observables and detach event handlers to avoid memory leaks. See details in Cleaning up on instance destruction in this document. Called immediately before Angular destroys the directive or component. |