Các móc vòng đời góc

Tram Ho

Hé lô xin chào các bạn, mình đã làm Angular được một thời gian. Sắp tới mình sẽ đi phỏng vấn để tìm một bến đỗ mới, thử thách mới, môi trường mới, để học hỏi nhiều hơn => tất cả là xạo lìn đấy, mình muốn nhảy việc để đạt mục tiêu của mình “GET 1k5 trump”, nên mình sẽ chia sẻ một số kiến thức về Angular xách nách để đi phỏng vấn nhé. Chủ đề ngày hôm nay sẽ là lifecycle hooks, phỏng vấn từ Junior trở lên đều bị hỏi câu này.

Tổng quát life cycle của một component

Constructor

Là phương thức mặc định của class được thực khi class đó được khởi tạo. Nó nên được dùng để khai báo Dependency Injection, không nên xử lí logic ở trong phương thức này

ngOnChanges

Hook này sẽ được gọi mỗi khi có sự thay đổi giá trị của các Input của component.

Tuy nhiên với các Input có type là Object hoặc Array thì khi thay đổi 1 property hoặc push một phần tử vào mảng đó thì ngOnChange sẽ không chạy, trường hợp này nó chỉ chạy khi các bạn thay đổi reference của biến Input.

Lưu ý nếu component không có các Input thì ngOnChanges sẽ không chạy nhé các bạn

ngOninit

Phương thức này sẽ được gọi duy nhất một lần khi khởi tạo xong Component. Ở đây được sử dụng để khởi tạo bổ sung thêm cho component như là khởi tạo giá trị cho biến, gọi api, khởi tạo form, …

Thứ tự thực thi với case Parent/Child Component:

ngDoCheck

Phương thức này sẽ được gọi sau ngOninit và mỗi khi change detection chạy. Phương thức này dùng để custom
Angular có cơ chế change detection, nó sẽ phát hiện các sự kiện như DOM Event(click, hover), setTimeout, SetInterval, XHR Request. Khi bắt được những sự kiện này, Angular sẽ thực hiện detech Change toàn bộ cây component của ứng dụng để kiểm tra sự thay đổi và re-render UI. Lúc này change detector ở mỗi component sẽ làm việc và ngDoCheck cũng được gọi.
Ở đây mình có một component

Và binding nó lên app component

Và khi mình click vào nút Change name thì kết quả sẽ như thế này

Vì phương này được gọi mỗi khi Angular phát hiện ra sự thay đổi ở bất kì 1 component nào đó cho nên các bạn chú ý để tránh ảnh hưởng đến hiệu năng ứng dụng nhé.

Với phương thức này chúng ta có thể implement cơ chế change detection riêng của component mình mong muốn bằng cách kết hợp việc set changeDetection: ChangeDetectionStrategy.OnPush (component chỉ chạy change detection chỉ khi giá trị data Input thay đổi) và trigger change detection của component bằng tay

Đặc biệt, thằng ngOnChanges nó sẽ không chạy khi các bạn thay đổi giá trị 1 property của Object là một Input của component, bạn phải thay đổi reference của object đó như ở trên mình trình bày, ngoài ra ngDoCheck cũng có thể là cứu cánh cho bạn ở case này, tuy nhiên nhớ coi chừng Perf đấy nhé.

Thứ tự thực thi với case Parent/Child Component:

ngAfterContentInit

Phương thức được gọi một lần duy nhất sau ngDoCheck lần đầu tiên. Nó thực thi sau khi Angular chiếu content lên component view với thẻ ng-content nên phương thức này giúp bạn có thể truy xuất content được truyền vào với ContentChild decorator ví dụ như lấy giá trị 1 public property từ component content chẳng hạn

Ví dụ:
WrapContent Component

Sử dụng WrapContent Component ở App Component và truyền content vào cho nó là ChildContent Component

Kết quả in ra màn hình sẽ là

ngAfterContentChecked

Được gọi sau khi Angular đã kiểm tra content được truyền vào component
Phương thức này được gọi lần đầu sau ngAfterContentInit thực thi và sau đó được gọi sau mỗi lần ngDoCheck (từ lần thứ 2 trở đi) tức mỗi lần change detection được thực thi.
Với mình thì thường sử dụng thằng này để thực thi đoạn logic mình mong muốn mỗi khi change detection để đảm bảo đoạn logic mình chạy lấy được dữ liệu mới nhất của content truyền vào.

ngAfterViewInit

Được gọi sau khi Angular đã hoàn thành khởi tạo view component và view con. Và nó chỉ chạy duy nhất một lần
Mục đích sử dụng thông thường là thực thi view query với tham chiếu bằng ViewChild hoặc ViewChilden

Kết quả sẽ in ra:

ngAfterViewChecked

Được gọi sau khi Angular kiểm tra component view và view những thằng con hoặc view chứa directive.
Phương thức được gọi sau ngAfterViewInit lần đầu tiên, và sau mỗi ngAfterContentChecked

ngDestroy

Được gọi 1 lần duy nhất khi Angular hủy component
Thường dùng để handle các event, ubsubscribe obseverble khi hủy component

Thứ tự thực thi khi các component lồng nhau

Nested Components đấy cá bạn, nói cách khác là các component có quan hệ cha con thì từng thằng nó sẽ chạy life cycle hook của nó thằng nào trước thằng nào sau, sống trên đời phải có thứ tự chứ đúng không my fens, ai cũng dành chạy trước thì có mà toang

  • Ok, với ngOnit, ngDoCheck thì cha làm trước rồi con mới được làm.
  • ngDestroy thì thằng con chạy trước, hết tất cả các thằng con thì thằng cha mới tự tử (destroy)
  • Với ngAfterViewInit và ngAfterViewChecked những thằng con sẽ được chạy trước, sau khi đám đó chạy xong hết thì ông bô (component cha) mới chạy 2 hook đó.

Lưu ý

Với trường hợp component cha các bạn KHÔNG set changeDetection: ChangeDetectionStrategy.OnPush, tức nó Default, tức mỗi lần state của application thay đổi thì component đó sẽ thực thi change detection. Lúc đó sau khi Component cha chạy ngDoCheck, component con sẽ chạy ngDoCheck -> ngAfterContentChecked -> ngAfterViewChecked. Nhưng nếu component cha các bạn set ChangeDetectionStrategy.OnPush, thì trừ khi Input của component cha thay đổi, hoặc xuất hiện event để chạy change detection ở component cha thì component con mới thực thi đoạn hook ở trên, còn không thì sẽ không chạy đâu nhé các bạn. Lý giải cho điều này là khi các bạn set ChangeDetectionStrategy.OnPush tức component cha sẽ không chạy change detection mỗi khi state application thay đổi mà không liên quan đến nó => Bài tới mình sẽ viết về Change Detection để các bạn hiểu rõ hơn

Ở trên là những kiến thức của mình về Angular lifecycle hook mà mình muốn chia sẻ cùng các bạn. Hi vọng các bạn sẽ góp ý xây dựng những cái mình thiếu sót. Cùng nhau GET X k trump nào

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo