Die ngOnDestroy-hook in Angular
Die hook ngOnDestroy aktiveer wanneer
die komponent verwyder word. In hierdie hook kan jy
hulpbronne vrystel, intekening op
elementgebeurtenisse kanselleer, timers stop en so meer.
Die skepping en vernietiging van 'n komponent in Angular
gebeur wanneer dit reaktief vertoon
en weggesteek word deur 'n if voorwaarde.
Dit beteken Angular versteek nie net komponente nie,
maar verwyder hulle en bring hulle weer terug.
Komponente word ook geskep en verwyder wanneer hulle reaktief deur lusse herhaal word. In hierdie geval skep en verwyder Angular ook komponente.
Kom ons probeer dit prakties. Laat ons die
koppelvlak OnDestroy invoer:
import { OnDestroy } from '@angular/core';
Laat ons dit by die klas koppel:
export class UserComponent implements OnDestroy {
}
En nou skryf ons ons hook:
export class UserComponent implements OnDestroy {
constructor() {
console.log('constructor is started');
}
ngOnDestroy() {
console.log('onDestroy is applied');
}
}
Skep 'n reaktiewe if waarmee
'n kinderkomponent vertoon sal word.
Toets die werking van die bestudeerde
hook.
In die ouerkomponent is daar 'n array van gebruikersname. Skep 'n kinderkomponent vir 'n gebruiker. Herhaal die array met 'n lus en vertoon die komponente met die gebruikers. Skep 'n knoppie wat, wanneer dit gedruk word, elemente uit die array sal verwyder. Kontroleer dat die vernietigingshook in die kinderkomponente sal aktiveer.
