Tìm hiểu vòng đời Angular

Tìm hiểu vòng đời Angular là bài học trong khoá học lập trình Angular các bạn có thể bỏ chút thời gian quý báu của mình để tìm hiểu bài học này, bởi nó rất quan trọng cho các bạn khi thực hiện một dự án hoặc khi các bạn đi xin việc người ta sẽ hỏi rất nhiều về câu hỏi này trong khi bạn tuyển dụng ngôn ngữ angular.

Vòng đời Angular tên tiếng anh Angular Lifecycle Hooks là một thực thể trong Angular cung cấp các móc vòng đời (lifecycle hooks), chúng cho phép chèn thêm những tác vụ cần thiết trong những khoảnh khắc quan trọng trong quá trình khởi tạo cho đến khi phá hủy các component. Chúng ta có thể khai thác những khoảnh khắc quan trọng trong vòng đời đó bằng cách triển khai một hoặc nhiều interfaces trong thư viện lõi Angular.

Trình tự vòng đời Angular

Bạn có thể 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 thể hiện đó.

Mỗi giao diện xác định nguyên mẫu cho một phương thức móc đơn, có tên là tên giao diện được bắt đầu bằng ng. Ví dụ, giao diện OnInit có một phương thức hook tên là ngOnInit (). Nếu bạn triển khai phương thức này trong lớp thành phần hoặc chỉ thị của mình, Hoạt động Angular sẽ gọi nó ngay sau khi kiểm tra các thuộc tính đầu vào cho thành phần hoặc chỉ thị đó lần đầu tiên.

ngOnChanges

ngOnChanges kích hoạt sau khi sửa đổi các thành viên lớp liên kết @Input. Dữ liệu bị ràng buộc bởi trình trang trí @Input () đến từ một nguồn bên ngoài. Khi nguồn bên ngoài thay đổi dữ liệu đó theo cách có thể phát hiện được, nó sẽ chuyển qua thuộc tính @Input một lần nữa.

Với bản cập nhật này, ngOnChanges ngay lập tức hoạt động. Nó cũng kích hoạt khi khởi tạo dữ liệu đầu vào. Hook nhận một tham số tùy chọn của loại SimpleChanges. Giá trị này chứa thông tin về các thuộc tính ràng buộc đầu vào đã thay đổi.

ngOnInit

ngOnInit kích hoạt một lần khi khởi tạo các thuộc tính ràng buộc đầu vào (@Input) của một thành phần. Ví dụ tiếp theo sẽ giống với ví dụ cuối cùng. Móc không kích hoạt khi ChildComponent nhận dữ liệu đầu vào. Đúng hơn, nó kích hoạt ngay sau khi dữ liệu hiển thị đến mẫu ChildComponent.

ngDoCheck

ngDoCheck kích hoạt với mọi chu kỳ phát hiện thay đổi. Angular chạy phát hiện thay đổi thường xuyên. Thực hiện bất kỳ hành động nào sẽ làm cho nó quay vòng. ngDoCheck kích hoạt với các chu kỳ này. Sử dụng nó một cách thận trọng. Nó có thể tạo ra các vấn đề về hiệu suất khi được triển khai không chính xác.

ngDoCheck cho phép các nhà phát triển kiểm tra dữ liệu của họ theo cách thủ công. Họ có thể kích hoạt một ngày nộp đơn mới có điều kiện. Cùng với ChangeDetectorRef, các nhà phát triển có thể tạo các kiểm tra của riêng họ để phát hiện thay đổi.

ngAfterContentInit

ngAfterContentInit kích hoạt sau khi khởi tạo DOM nội dung của thành phần (tải lần đầu tiên). Chờ đợi trên các truy vấn @ContentChild (ren) là trường hợp sử dụng chính của hook.

@ContentChild (ren) truy vấn các tham chiếu phần tử mang lại cho DOM nội dung. Do đó, chúng sẽ không có sẵn cho đến sau khi DOM nội dung tải. Do đó, tại sao ngAfterContentInit và đối tác của nó ngAfterContentChecked được sử dụng.

ngAfterContentChecked

ngAfterContentChecked kích hoạt sau mỗi chu kỳ phát hiện thay đổi nhắm mục tiêu DOM nội dung. Điều này cho phép các nhà phát triển hỗ trợ cách DOM nội dung phản ứng với việc phát hiện thay đổi. ngAfterContentChecked có thể kích hoạt thường xuyên và gây ra các vấn đề về hiệu suất nếu được triển khai kém.

ngAfterContentChecked cũng kích hoạt trong giai đoạn khởi tạo của một thành phần. Nó xuất hiện ngay sau ngAfterContentInit.

ngAfterViewInit

ngAfterViewInit kích hoạt một lần sau khi chế độ xem DOM hoàn tất khởi tạo. Chế độ xem luôn tải ngay sau nội dung. ngAfterViewInit đợi các truy vấn @ViewChild (ren) để giải quyết. Các phần tử này được truy vấn từ trong cùng một khung nhìn của thành phần.

Trong ví dụ dưới đây, tiêu đề h3 của BComponent được truy vấn. ngAfterViewInit thực thi ngay khi có kết quả của truy vấn.

ngAfterViewChecked

ngAfterViewChecked kích hoạt sau bất kỳ chu kỳ phát hiện thay đổi nào nhắm mục tiêu chế độ xem của thành phần. Móc ngAfterViewChecked cho phép các nhà phát triển tạo điều kiện thuận lợi cho việc phát hiện thay đổi ảnh hưởng đến DOM xem như thế nào.

ngOnDestroy

ngOnDestroy kích hoạt khi một thành phần bị xóa khỏi chế độ xem và DOM tiếp theo. Móc này tạo cơ hội làm sạch mọi đầu lỏng lẻo trước khi xóa thành phần.