Sử dụng Lifecycle Hooks
Một component có một vòng đời, được quản lý bởi Angular. Angular tạo ra một component, render nó, khởi tạo và render những thành phần con, tiến hành thay đổi khi thuộc tính liên kết của component thay đổi, và cuối cùng phá huỷ chúng trước khi xoá chúng khỏi DOM.
Angular cung cấp một bộ quản lý vòng đời, chúng ta có thể sử dụng để can thiệp vào vòng đời này và thực hiện những hành động cần thiết. Vì đây là khóa học cơ bản, chúng ta chỉ giới hạn tập trung vào ba vòng đời đời thông dụng nhất.
OnInit: Thực hiện khởi tạo những thứ bên trong component sau khi Angular đã khởi tạo những thuộc tính liên kết dữ liệu. Đây là nơi để lấy dữ liệu cho template từ một back-end service, chúng ta sẽ làm rõ điều này trong chương tiếp theo.
OnChanges: Thực hiện bất kỳ hành động nào sau khi Angular thiết lập những thuộc tính liên kết input.
OnDestroy: Thực hiện việc dọn dẹp trước khi Angular sẽ hủy component.
Để sử dụng một Lifecycle Hook, chúng ta “implements” Lifecycle Hook interface mà chúng ta muốn. Chúng ta đã nói về interface ở trong chương trước đây. Angular cung cấp nhiều interfaces xây dựng sẵn mà chúng ta có thể implement, bao gồm cả những interface ứng với mỗi lifecycle hook. Dưới đây là một ví dụ mà chúng ta implement OnInit.
Đầu tiên chúng ta sẽ implements OnInit, tuy nhiên để sử dụng interface OnInit chúng ta cần import nó từ @angular/core. Cuối cùng chúng ta sẽ thực hiện những gì cần thiết trong hàm ngOnInit. Mỗi một interface lifecycle hook sẽ có những phương thức khác nhau khi chúng ta implement, trong ví dụng này phương thức chúng ta implement là “ngOnInit”.
Hãy nhớ lại một chút về những gì chúng ta thảo luận về interface trong phần trước rằng interface thì không được hỗ trợ bởi ES5 và ES2015, đây là những đặc trưng của TypeScript. Điều này có nghĩa là kết quả của những dòng code Typescript của chúng ta cũng trả về là javascript. Vì vậy chúng ta không thực sự cần phải implement những interface để có thể sử dụng lifecycle hook. Đơn giản chúng ta có thể viết hook function (như ngOnInit). Tuy nhiên, sẽ tốt hơn nếu chúng ta implement như những gì Angular đã khuyến cáo, bởi như vậy chúng ta sẽ cung cấp tối hơn cho các công cụ editor, và cũng giúp code của chúng ta rõ ràng hơn.
Last updated