Hook ngOnDestroy in Angular
L'hook ngOnDestroy viene attivato quando
il componente viene rimosso. In questo hook è possibile
liberare risorse, rimuovere sottoscrizioni a
eventi degli elementi, fermare timer, ecc.
La creazione e la rimozione di un componente in Angular
avviene quando viene mostrato e nascosto in modo reattivo
tramite la condizione if.
Ciò significa che Angular non si limita a nascondere i componenti,
ma li rimuove e li ripristina.
Inoltre, i componenti vengono creati e rimossi quando vengono iterati reattivamente nei cicli. In questo caso Angular crea e rimuove anch'esso i componenti.
Proviamo nella pratica. Importiamo l'
interfaccia OnDestroy:
import { OnDestroy } from '@angular/core';
Colleghiamola alla classe:
export class UserComponent implements OnDestroy {
}
Ora scriviamo il nostro hook:
export class UserComponent implements OnDestroy {
constructor() {
console.log('constructor is started');
}
ngOnDestroy() {
console.log('onDestroy is applied');
}
}
Create un if reattivo tramite
il quale verrà mostrato un componente figlio.
Verificate il funzionamento dell'hook studiato.
Nel componente genitore è dato un array di nomi utente. Create un componente figlio per l'utente. Iterate l'array con un ciclo e mostrate i componenti con gli utenti. Create un pulsante, al click del quale gli elementi verranno rimossi dall'array. Verificate che nei componenti figli venga attivato l'hook di rimozione.
