Angular Academy · Lezione

ngOnInit e inizializzazione

Esegua la logica di configurazione all'avvio di un componente.

ngOnInit e inizializzazione è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Che cosa sono gli hook del ciclo di vita?

I componenti Angular hanno un ciclo di vita gestito dal framework: creazione, rilevamento delle modifiche, rendering e distruzione. Gli hook del ciclo di vita consentono di eseguire codice in momenti specifici.

Introduzione a OnInit

L'hook OnInit viene eseguito una volta, dopo che Angular ha impostato gli input del componente e visualizzato la vista iniziale. È il punto standard in cui inserire la logica di inizializzazione.

Implementare OnInit

Implementi l'interfaccia OnInit e aggiunga il metodo ngOnInit. Angular lo chiama automaticamente.

import { Component, OnInit } from "@angular/core";

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnInit {
  ngOnInit(): void {
    console.log("Component initialized");
  }
}

Costruttore e ngOnInit a confronto

Il costruttore viene eseguito per primo, prima che gli input siano impostati, e dovrebbe occuparsi solo della semplice injection delle dipendenze. Usi ngOnInit per la configurazione effettiva, quando gli input sono disponibili.

constructor(private http: HttpClient) {
  // inputs NOT ready yet
}

ngOnInit() {
  // inputs ARE ready here
}

Gli input sono pronti in ngOnInit

Quando ngOnInit viene eseguito, tutte le proprietà @Input hanno già i valori iniziali associati dal componente padre.

@Input() userId!: string;

ngOnInit() {
  console.log(this.userId); // available
}

Recuperare dati in ngOnInit

Un pattern comune consiste nel caricare dati da un servizio in ngOnInit, poiché in questo punto può accedere agli input e alle dipendenze.

ngOnInit() {
  this.userService.getUser(this.userId)
    .subscribe(u => this.user = u);
}

ngOnInit viene eseguito una volta

A differenza degli hook per il rilevamento delle modifiche, ngOnInit viene eseguito esattamente una volta durante il ciclo di vita del componente, subito dopo il primo ngOnChanges.

Ordine rispetto a ngOnChanges

Se il componente ha degli input, ngOnChanges viene eseguito per primo con i valori iniziali, quindi viene eseguito ngOnInit. In assenza di input, ngOnInit viene comunque eseguito.

// sequence with inputs:
// 1. constructor
// 2. ngOnChanges (first)
// 3. ngOnInit

Inizializzare i form

La creazione di form reattivi è un'attività classica per ngOnInit, perché potrebbe essere necessario usare servizi iniettati per configurare il form.

form!: FormGroup;

ngOnInit() {
  this.form = this.fb.group({
    name: [""],
    email: [""]
  });
}

Mantenere leggeri i costruttori

Eviti di eseguire operazioni pesanti nel costruttore. Viene eseguito prima che Angular colleghi gli input e gli effetti collaterali al suo interno rendono i componenti più difficili da testare e prevedere.

Inizializzazione asincrona

Può chiamare la logica asincrona da ngOnInit, ma il metodo restituisce direttamente void; esegua la sottoscrizione o usi pattern asincroni al suo interno.

ngOnInit() {
  this.loadAsync();
}

private async loadAsync() {
  this.data = await firstValueFrom(this.api.get());
}

Verifica rapida

Verifichi la Sua comprensione di OnInit.

Riepilogo

L'hook OnInit con ngOnInit viene eseguito una volta dopo l'associazione degli input ed è ideale per recuperare dati e configurare form. Mantenga leggero il costruttore e riservi l'inizializzazione a ngOnInit.

Domande Frequenti

La lezione «ngOnInit e inizializzazione» è gratuita?

Sì — il testo completo di «ngOnInit e inizializzazione» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «ngOnInit e inizializzazione»?

Esegua la logica di configurazione all'avvio di un componente. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «ngOnInit e inizializzazione»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy