Ciclo di Vita di un Componente Angular

C

Angular, come un Dio, crea per poi distruggere

Ogni framework basato sui componenti, quindi anche Angular, mette a disposizione degli eventi che definisco ogni singolo passaggio che effettua un componente dalla sua creazione alla sua distruzione.

Questi eventi possono essere usati per effettuare operazioni in un preciso stato nel quale si trova un componente.
Ma come si usano e quali sono questi eventi che fanno parte di un ciclo di vita di un componente Angular?

Guida all’uso

Per poter usare un evento del nostro componente, ci basta importare dal modulo core di Angular ed estenderlo al nostro componente. Guardiamo appena sotto com’è semplice fare quanto detto.

import { Component, OnInit, OnDestroy, DoCheck} from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DetailliveComponent implements OnInit, OnDestroy, DoCheck {

 constructor() { }

 ngOnInit() {
   // do somethings
 }

 ngDoCheck() {
   // do somethings
 }

 ngOnDestroy() {
   // do somethings
 }

}

In questo componente demo abbiamo implementato tre eventi che spiegheremo più avanti.
Quindi come detto poco fa, importiamo da modulo core di Angular l’evento di cui abbiamo bisogno e poi lo implementiamo nel componente tramite impements.

Eventi del ciclo di vita

Ora andiamo a scoprire nel dettaglio di cosa si occupano questi eventi.
Volutamente tratteremo in modo superficiale eventi di checked, i quali verranno trattati in una guida più dettagliata in quanto sono eventi che bombardano la nostra web application (DoCheck, AfterContetChecked e AfterViewInitChecked).

Constructor

È il metodo base del componente Angular e non fa parte del ciclo di vita di un componente ma lo trattiamo come tale.
Infatti il constructor è la prima parte di codice che viene eseguita da un componente quando viene istanziato.

OnChanges

Si effettua come primo evento del componente Angular e anche ogni qualvolta che cambiano i valori delle propietà di input.
Il metodo implementato usando l’argomento SimpleChanges può essere usato per leggere il vecchio e il nuovo valore di una proprietà.

OnInit

Come presuppone il nome, questo evento dichiara che Angular è pronto alla creazione del componente.
Questa fase si verifica subito dopo il primo OnChanges e viene eseguita una sola volta.
Il che significa che tutte le dipendenza iniettate verranno risolte e tutti i membri della classe verranno definiti. questo lo rende il posto perfetto per eseguire qualsiasi operazione/logica di inizializzazione del componente.

DoCheck

Questa fase viene eseguita durante il check interno di Angular per valutare le modifiche ai componenti e ai dati.
Questo evento a differenza dell’OnChanges che si attiva a ogni cambiamento di una proprietà di input, viene lanciato a qualsiasi cambiamento accada al componente e quindi viene lanciato molto spesso da Angualr (ci basta pensare che ogni volta che il mouse si muove si genera un evento docheck).
La logica dentro questo evento dovrebbe essere molto leggere per avere una buona esperienza utente e serve soprattutto a effettuare un rilevamento personalizzato delle modifiche .

AfterContentInit

Questo evento si riferisce al completamento degli eventi legati al componente, in specifico alla fine della creazione dell’albero dei componenti figli.

AfterContentChecked

Viene invocato ogni volta che terminano i DoCheck.

AfterViewInit

Dopo il render della view associata al componente e delle sue viste secondarie, viene innestato questo evento e quindi il DOM è visibile.

AfterViewChecked

Invocato ogni volta che termina il rilevamento di AfterContentChecked.

OnDestroy

Questa è l’ultima fase del componente, che si verifica appena prima che Angular lo distrugga. Anche questa come OnInit viene eseguita una sola volta.
Viene usata soprattutto per ripulire il componente come ad esempio:

  1. Interrompere i timer degli intervalli.
  2. Lanciare l’unubscribe agli oggetti Observable.
  3. Lanciare l’unubscribe a tutte le chiamate.

Ecco un esempio:

import { Component, OnInit, OnDestroy, DoCheck} from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DetailliveComponent implements OnDestroy {

 demoInterval = null

 constructor() {
  this.demoInterval = setInterval(function(){ alert("Hello"); }, 3000);
 }

 ngOnDestroy() {
   clearInterval(this.demoInterval);
 }

}

 

Cliclo di vita con componente figlio

  1. OnChanges
  2. OnInit
  3. DoCheck
  4. AfterContentInit
  5. AfterContentChecked
    1. Componente figlio –> OnChanges
    2. Componente figlio –> OnInit
    3. Componente figlio –> DoCheck
    4. Componente figlio –> AfterContentInit
    5. Componente figlio –> AfterContentChecked
    6. Componente figlio –> AfterViewInit
    7. Componente figlio –> AfterViewChecked
  6. AfterViewInit
  7. AfterViewChecked

 

In cosa ci aiutano

Queste fasi del ciclo di vita di un componente, che sono separati in modo distinto dagli eventi appena descritti, ci aiutano a eseguire il nostro codice in un momento ben preciso dello stato della nostra applicazione.

Se ti sei perso le altre guide per Angular vai alla sezione giusta per farti un giro!

A proposito di me

Pasquale De Lucia

Appassionato di tecnologia, ama la programmazione, tanto da farla diventare la sua professione. Orientato al Front-End, ma non lascia indietro gli studi su Back-End e database.
Amante dello smart working.

Gli articoli più letti

Articoli recenti

Commenti recenti