Sau khi khởi tạo một component / directive bằng cách gọi hàm constructor của nó, Angular gọi các phương thức hook theo trình tự sau tại các thời điểm cụ thể:
| Hook | Mục đích & thời điểm |
|---|---|
| constructor | – Là phương thức mặc định của class khi class đó được khởi tạo |
| ngOnChanges(changes: SimpleChanges) | – ngOnChanges kích hoạt sau khi sửa đổi các thành phần lớp bị ràng buộc @Input. – Dữ liệu được ràng buộc bởi @Input() decorator đế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. – Khi ta thay đổi input, ngOnChanges sẽ kích hoạt ngay lập tức. 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 thuộc loại SimpleChanges. Giá trị này chứa thông tin về các thuộc tính giới hạn đầu vào đã thay đổi. |
| ngOnInit() | Khởi tạo directive / component sau khi Angular hiển thị các thuộc tính ràng buộc dữ liệu và đặt các thuộc tính đầu vào của directive / component. Được gọi một lần, sau ngOnChanges() đầu tiên. |
| ngDoCheck() | Phát hiện và hành động theo những thay đổi mà Angular không thể hoặc sẽ không tự mình phát hiện. Được gọi trong mỗi lần chạy phát hiện thay đổi, ngay sau ngOnChanges() và ngOnInit(). |
| ngAfterContentInit() | Thự thi sau khi Angular thêm nội dung bên ngoài vào view của component / view mà directive được đưa vào. Được gọi một lần sau ngDoCheck() đầu tiên. |
| ngAfterContentChecked() | Thự thi sau khi Angular đã kiểm tra nội dung bên ngoài đã được đưa vào view của component. Được gọi sau ngAfterContentInit() và mọi ngDoCheck() tiếp theo. |
| ngAfterViewInit() | Thự thi sau khi Angular khởi tạo các view của component và các view con / view mà directive được đưa vào. Được gọi một lần sau ngAfterContentChecked() đầu tiên. |
| ngAfterViewChecked() | Thực thi sau khi Angular kiểm tra các view của component và các view con /view mà directive được đưa vào. Được gọi sau ngAfterViewInit() và mọi ngAfterContentChecked() tiếp theo. |
| ngOnDestroy() | Dọn dẹp ngay trước khi Angular phá hủy directive / component. Hủy đăng ký Observables và tách trình xử lý sự kiện để tránh rò rỉ bộ nhớ. Được gọi ngay trước khi Angular phá hủy directive / component. |