Sơ lược về vòng đời của component/directive trong Angular

·

2 min read

Vòng đời của 1 component/directive trong angular được thể hiện qua 8 method

  1. ngOnChanges
  2. ngOninit
  3. ngOnDoCheck
  4. ngAfterContentInit
  5. ngAfterContentChecked
  6. ngAfterViewInit
  7. ngAfterViewChecked
  8. ngOnDestroy

Chi tiết

  1. ngOnChanges: Gọi sau constructor và trước OnInit, mỗi khi có thay DOM events (mouse, key, …), khi có timer, XHR request ... thì sẽ được kích hoạt lại.

  2. ngOninit: Được gọi khi component đã được khởi tạo, giống như thông báo component đã được khởi tạo xong, gọi sau constructor và onChange (onChange chạy lần đầu), thường viết logic khởi tạo ở đây như lấy data để hiển thị lên view, chỉ chạy 1 lần.

  3. ngOnDoCheck: Được gọi mỗi lần chạy phát hiện thay đổi và lần đầu tiên chạy là sau khi ngOnInit được gọi. Angular có một hệ thống chạy ngầm để tìm kiếm các thay đổi mà trình biên dịch không thể tự phát hiện. Mỗi lần chạy này cũng chạy qua thằng ngOnDoCheck.

  4. ngAfterContentInit: Ví dụ ta nhúng vào template 1 thẻ ng-content, ta sẽ sử dụng và xử lí logic cho thằng đối tượng này tại hook nay, được gọi một lần sau ngDoCheck() đầu tiên.

  5. ngAfterContentChecked: Thực thi sau ngAfterContentInit lần đầu và được gọi mỗi khi change detection chạy. Dùng để xử lí logic cho ng-content ở trên mỗi khi chúng có thay đổi.

  6. ngAfterViewInit: Được gọi sau khi Angular khởi tạo view của component và các child views, tại đây thì toàn bộ view đã được render, dùng để xử lí @ViewChild, chỉ được gọi 1 lần sau ngAfterContentChecked lần đầu.

  7. ngAfterViewChecked: Thực thi sau khi Angular kiểm tra các view của component và các child views,

  8. được gọi sau ngAfterViewInit và sau mỗi lần chạy change detection.

  9. ngOnDestroy: Dọn dẹp ngay trước khi Angular phá hủy directive / component, thường dùng ubsubscribe observable, chỉ chạy 1 lần.