Spiegazione del ciclo di vita dei componenti angolari e dei suoi vari metodi

Lanciato nel 2009 da Google, Angular è un framework di sviluppo JavaScript con il linguaggio di programmazione Typescript. È uno dei framework di progettazione più popolari per lo sviluppo di app. La parte migliore del framework Angular è che si tratta di un'applicazione open source. Gli sviluppatori utilizzano il framework Angular per creare applicazioni mobili e Web e visualizzare i dati. Per lo sviluppo di Angular, gli sviluppatori devono seguire un processo esteso chiamato ciclo di vita di Angular.

Questo blog ti aiuta a comprendere il ciclo di vita di Angular e i suoi vari metodi di hook.

Cos'è il ciclo di vita angolare?

Il ciclo di eventi richiesto per eseguire i componenti Angular è chiamato ciclo di vita Angular. I componenti Angular sono gli elementi costitutivi di un'applicazione necessaria per l'interfaccia utente. In parole povere, i componenti Angular sono blocchi responsabili del controllo di una patch dello schermo in un'applicazione Angular. I componenti comprendono varie proprietà insieme a un selettore, un modello e uno stile. I componenti richiedono anche metadati per la loro elaborazione.

Angular esegue diversi passaggi di rilevamento delle modifiche per tenere traccia delle modifiche nelle proprietà associate ai dati durante il ciclo di vita. Un ciclo di vita Angular inizia quando Angular avvia una classe componente. Quindi definisce la vista del componente e la vista dei componenti figlio. Verso la fine, Angular distrugge i componenti che non sono più in uso. Chiama anche vari metodi hook dopo aver creato un'istanza di un componente.

I vari hook del ciclo di vita dei componenti Angular fungono da funzionalità nel framework Angular. Ogni metodo hook consente agli sviluppatori di eseguire codici diversi durante un particolare evento.

Impara i corsi di sviluppo software online dalle migliori università del mondo. Guadagna programmi Executive PG, programmi di certificazione avanzati o programmi di master per accelerare la tua carriera.

Ciclo di vita dei componenti angolari

Tutti i componenti Angular hanno un ciclo di vita diverso suddiviso in otto diverse fasi. Queste fasi sono chiamate eventi hook del ciclo di vita che possono essere utilizzati separatamente al momento dell'applicazione. Prima dell'inizio del ciclo di vita, eseguiamo il costruttore della classe componente, quindi si verificano i vari eventi hook. Gli eventi hook del ciclo di vita Angular sono divisi in due categorie principali. Una fase è collegata al componente originale mentre la seconda fase riguarda i figli di quel particolare componente.

Cerchiamo di capire le varie fasi del ciclo di vita angolare:

• ngOnChanges:- L'evento ngOnChanges() si verifica quando cambiamo il valore di un controllo di input all'interno del componente e la proprietà associata del componente cambia. In parole povere, questo metodo hook si verifica ogni volta che Angular imposta o ripristina le proprietà inbound del componente. Durante questo metodo, viene ricevuto un oggetto 'SimpleCharge' per i valori delle proprietà correnti e precedenti.
  Questo metodo hook riceve una mappa dati alterata dei valori delle proprietà correnti e precedenti. La mappa dei dati è racchiusa come SimpleCharge. È opportuno ricordare che questo evento si verifica molto spesso. Pertanto, è necessario prestare la massima attenzione durante l'esecuzione di eventuali modifiche durante l'evento in quanto possono influire in modo significativo sulle prestazioni. Devi usare questo metodo hook solo se il componente ha input vincolati e modifichi le proprietà associate del componente. Pertanto, viene generalmente considerato un metodo di callback.
• ngOnInit:- Questo evento viene utilizzato per inizializzare i dati in un componente. ngOnInit() inizializza il componente o la direttiva una volta che le proprietà associate ai dati vengono visualizzate da Angular e le proprietà di input vengono impostate dal componente. Lo scopo principale di ngOnInit() è eseguire inizializzazioni complesse. Il metodo hook utilizza innanzitutto il componente per generare i dati iniziali o le variabili locali in valori semplici. Viene quindi utilizzato per configurare il componente una volta che Angular ha impostato le proprietà di input. L'evento ngOnInit() viene solitamente chiamato dopo ngOnChanges se il componente ha proprietà associate. Tuttavia, se il componente non contiene alcuna proprietà associata, possiamo eseguire direttamente l'evento ngOnInit(). Devi anche ricordare che questo hook viene chiamato solo una volta.
• ngDoCheck:- Questo evento hook si verifica ogni volta che controlliamo le proprietà di un metodo di input. L'evento ngDoCheck è parte integrante di ogni ciclo di rilevamento delle modifiche e può essere utilizzato insieme al proprio controllo logico. Questo evento facilita il rilevamento di modifiche o algoritmi personalizzati nel componente. Il metodo del libro ngDoCheck consente il rilevamento di quei cambiamenti che Angular non è in grado di rilevare. Puoi invocare ngDoCheck dopo ngOnChanges per ogni esecuzione di rilevamento delle modifiche. Può essere attivato dopo ngOnInit alla prima esecuzione, anche se non sono state apportate modifiche alle proprietà associate del componente.
  
• ngAfterContentInit:- Questa fase di hook o metodo del ciclo di vita è simile a ngOnInit poiché si verifica solo una volta durante la vita del componente. Puoi attivare questo evento una sola volta quando devi controllare i binding del componente per la prima volta. Eseguiamo questo evento dopo che Angular ha eseguito qualsiasi attività di proiezione del contenuto all'interno del componente. In parole semplici, ngAfterContentInit viene eseguito quando c'è una proiezione di contenuto esterno da parte di Angular nella vista del componente o nella vista all'interno della quale è presente una direttiva. ngAfterContentInit viene invocato Angular subito dopo l'esecuzione del metodo ngDoCheck. Questo metodo del ciclo di vita è correlato alle inizializzazioni del componente figlio.
  
• ngAfterContentChecked:- Questa fase di hook è un'azione successiva al metodo ngDoCheck. Come suggerisce il nome, il metodo ngAfterContentChecked viene eseguito dopo che Angular ha rilevato le modifiche nel contenuto esterno proiettato all'interno del componente. Questo evento si verifica dopo ogni ciclo di rilevamento delle modifiche. Viene chiamato dopo ngAfterContentInit() e ogni successivo ngDoCheck(). Come ngAfterContentInit, anche ngAfterContentChecked è associato alle inizializzazioni dei componenti figlio.
  
• ngAfterViewInit: - ngAfterViewInit viene attivato al termine dell'inizializzazione della vista del componente. Viene chiamato solo una volta dopo il metodo del ciclo di vita ngAfterContentChecked(). Questo metodo hook viene utilizzato solo per i componenti e non per i componenti figlio.
  

  Corsi e articoli popolari sull'ingegneria del software

  Programmi popolari
  Programma Executive PG in Software Development - IIIT B	Programma di certificazione Blockchain - PURDUE	Programma di certificazione di sicurezza informatica - PURDUE	MSC in Informatica - IIIT B
  Altri articoli popolari
  Stipendio per ingegnere cloud negli Stati Uniti 2021-22	Stipendio di AWS Solution Architect negli Stati Uniti	Stipendio per sviluppatori back-end negli Stati Uniti	Stipendio per sviluppatori front-end negli Stati Uniti
  Stipendio sviluppatore Web negli Stati Uniti	Domande per il colloquio con lo Scrum Master nel 2022	Come iniziare una carriera nella sicurezza informatica nel 2022?	Opzioni di carriera negli Stati Uniti per gli studenti di ingegneria

• ngAfterViewChecked:- Questo ciclo di vita viene invocato una volta che Angular termina il rilevamento o il controllo della visualizzazione del componente o del componente figlio. Anche se il metodo ngAfterViewChecked viene chiamato dopo il metodo ngAfterViewInit, viene eseguito dopo ogni successiva fase del ciclo di vita ngAfterContentChecked(). Questo metodo di aggancio è correlato solo ai componenti angolari .
  
• ngOnDestroy: - Il metodo hook ngOnDestroy() viene eseguito prima che Angular distrugga i componenti che non sono più necessari. Questo metodo del ciclo di vita separa gli eventi e aiuta a evitare perdite di memoria. Cancella anche le osservabili. Chiamiamo questo evento solo una volta prima di rimuovere il componente. Questo metodo hook funge da pulizia prima che Angular distrugga il componente.

Interfacce nel ciclo di vita angolare

I cicli di vita angolari sono generalmente definiti attraverso la classe dei componenti. Tuttavia, le interfacce possono essere utilizzate anche per definire la classe del componente Angular poiché i vari metodi hook hanno già un'interfaccia Typescript associata. Di solito intendiamo un'interfaccia come una caratteristica che aiuta a identificare vari metodi e proprietà correlate. Anche se non necessario, si consiglia vivamente di implementare le interfacce nel ciclo di vita di Angular. Lo scopo di ciascuna interfaccia è definire il prototipo per i metodi hook. Le interfacce sono denominate con il prefisso 'ng'.

Conclusione

I componenti angolari sono basati sulla programmazione dattiloscritta. Pertanto, è necessario conoscere le basi della programmazione dattiloscritta prima di implementare metodi di hook del ciclo di vita angolare. È anche essenziale apprendere i fondamenti della progettazione di app Angular, i processi dei metodi del ciclo di vita e il know-how di quali metodi di hook devono essere utilizzati.

Se hai intenzione di intraprendere una carriera nello sviluppo di app Angular, devi avere una conoscenza approfondita dell'intero processo e delle funzioni dei diversi metodi di hook. Inoltre, poiché Angular è un framework di sviluppo javascript, devi imparare il linguaggio di programmazione Java. Il programma Executive PG di upGrad per lo sviluppo di software è un'opzione eccellente per conoscere lo sviluppo di app Angular da zero.