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:

app/user/user.component.tsimport { OnDestroy } from '@angular/core';

Colleghiamola alla classe:

app/user/user.component.tsexport class UserComponent implements OnDestroy {
  
}

Ora scriviamo il nostro hook:

app/user/user.component.tsexport class UserComponent implements OnDestroy {
  constructor() {
    console.log('constructor is started');
  }
  
  ngOnDestroy() {
    console.log('onDestroy is applied');
  }
}