Hooks ngOnDestroy trong Angular

Hooks ngOnDestroy được kích hoạt khi một component bị xóa. Trong hooks này, bạn có thể giải phóng tài nguyên, hủy đăng ký sự kiện từ các phần tử, dừng bộ đếm thời gian, v.v.

Việc tạo và xóa component trong Angular xảy ra khi nó được hiển thị và ẩn một cách phản ứng bằng điều kiện if. Tức là Angular không chỉ ẩn các component đi, mà còn xóa chúng và khôi phục lại sau đó.

Ngoài ra, các component được tạo và xóa khi chúng được lặp lại một cách phản ứng trong các vòng lặp. Trong trường hợp này, Angular cũng tạo và xóa các component.

Hãy thử thực hành. Chúng ta import interface OnDestroy:

import { OnDestroy } from '@angular/core';

Kết nối nó với lớp:

export class UserComponent implements OnDestroy {
	
}

Và bây giờ chúng ta viết hooks của chúng ta:

export class UserComponent implements OnDestroy {
	constructor() {
		console.log('constructor is started');
	}
	
	ngOnDestroy() {
		console.log('onDestroy is applied');
	}
}

Tạo một điều kiện if phản ứng với sự trợ giúp của nó một component con sẽ được hiển thị. Kiểm tra hoạt động của hooks đã học.

Trong component cha có một mảng tên người dùng. Tạo một component con cho từng người dùng. Lặp qua mảng bằng vòng lặp và hiển thị các component với người dùng. Tạo một nút, khi nhấn vào sẽ xóa các phần tử khỏi mảng. Kiểm tra rằng trong các component con hooks hủy sẽ được kích hoạt.