Huku ngOnDestroy në Angular

Huku ngOnDestroy aktivizohet kur komponenti fshihet. Në këtë huk mund të çlironi burime, të hiqni abonimet në ngjarjet e elementeve, të ndaloni kohëmatësit etj.

Krijimi dhe fshirja e një komponenti në Angular ndodh kur ai shfaqet dhe fshihet në mënyrë reaktive përmes kushtit if. Kjo do të thotë se Angular nuk i fsheh thjesht komponentët, por i fshin dhe i kthen përsëri.

Gjithashtu, komponentët krijohen dhe fshihen kur përsëriten në mënyrë reaktive në sythe. Në këtë rast, Angular gjithashtu krijon dhe fshin komponentët.

Le të provojmë në praktikë. Le të importojmë interfaqen OnDestroy:

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

Le ta lidhim atë me klasën:

export class UserComponent implements OnDestroy {
	
}

Tani le të shkruajmë hukun tonë:

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

Krijoni një if reaktiv me të cilin do të shfaqet një komponent fëmijë. Kontrolloni funksionimin e hukut të mësuar.

Në komponentin prind është dhënë një grup emrash përdoruesish. Krijoni një komponent fëmijë për përdoruesin. Përsëriteni grupin me një cikël dhe shfaqni komponentët me përdoruesit. Krijoni një buton, duke klikuar mbi të cilin do të fshihen elementët nga grupi. Kontrolloni që në komponentët fëmijë të aktivizohet huku i fshirjes.