Hook ngOnDestroy dalam Angular

Hook ngOnDestroy dicetuskan apabila komponen dialih keluar. Dalam hook ini, anda boleh membebaskan sumber, memadam langganan kepada peristiwa elemen, menghentikan pemasa, dan sebagainya.

Penciptaan dan pemadaman komponen dalam Angular berlaku apabila ia ditunjukkan dan disembunyikan secara reaktif menggunakan syarat if. Iaitu, Angular bukan sekara menyembunyikan komponen, tetapi memadamkannya dan memulangkannya semula.

Komponen juga dicipta dan dipadam, apabila ia diulang secara reaktif dalam gelung. Dalam kes ini, Angular juga mencipta dan memadamkan komponen.

Mari kita cuba secara praktikal. Import antara muka OnDestroy:

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

Sambungkannya ke kelas:

export class UserComponent implements OnDestroy {
	
}

Dan sekarang tulis hook kami:

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

Buat if reaktif dengan menggunakan syarat yang akan menunjukkan komponen anak. Semak operasi hook yang telah dipelajari.

Dalam komponen induk, terdapat array nama pengguna. Buat komponen anak untuk setiap pengguna. Ulangi array dengan gelung dan paparkan komponen dengan pengguna. Buat butang, yang apabila ditekan, akan memadamkan elemen dari array. Pastikan bahawa dalam komponen anak, hook pada pemadaman akan dicetuskan.