Angular Academy · Lezione

ngOnChanges e modifiche agli input

Reagisca alle modifiche nelle proprietà di input.

ngOnChanges e modifiche agli input è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 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.

Reagire ai cambiamenti degli input

L'hook OnChanges consente a un componente di reagire ogni volta che cambiano le proprietà @Input. Angular chiama ngOnChanges prima di ngOnInit e a ogni aggiornamento degli input.

Implementare OnChanges

Implementi l'interfaccia OnChanges e aggiunga un metodo ngOnChanges che riceve un oggetto SimpleChanges.

import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnChanges {
  @Input() count = 0;
  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);
  }
}

L'oggetto SimpleChanges

SimpleChanges è una mappa indicizzata per nome dell'input. Ogni voce è un SimpleChange con currentValue, previousValue e firstChange.

ngOnChanges(changes: SimpleChanges) {
  const c = changes["count"];
  if (c) {
    console.log(c.previousValue, "->", c.currentValue);
  }
}

Rilevare il primo cambiamento

Il flag firstChange è true la prima volta che viene impostato un input. Lo usi per distinguere l'inizializzazione dagli aggiornamenti successivi.

ngOnChanges(changes: SimpleChanges) {
  if (changes["count"]?.firstChange) {
    console.log("initial value");
  } else {
    console.log("updated value");
  }
}

Reagire a un input specifico

Verifichi sempre che la chiave esista prima di leggerla, perché non tutti gli input cambiano a ogni ciclo.

ngOnChanges(changes: SimpleChanges) {
  if ("userId" in changes) {
    this.reload(this.userId);
  }
}

Rilevamento basato sui riferimenti

ngOnChanges viene eseguito quando cambiano i riferimenti di oggetti e array. Modificare un oggetto passato come input NON lo attiva.

// will NOT trigger ngOnChanges in parent-bound child:
this.config.theme = "dark";

// will trigger it:
this.config = { ...this.config, theme: "dark" };

Ordine con ngOnInit

Durante la creazione, ngOnChanges viene eseguito per primo con gli input iniziali, quindi viene eseguito ngOnInit. In seguito, ngOnChanges viene eseguito ogni volta che cambiano gli input.

Confrontare i valori precedenti e nuovi

Un uso comune consiste nel reagire solo quando un valore è effettivamente diverso, ad esempio ricaricando i dati quando cambia un input id.

ngOnChanges(changes: SimpleChanges) {
  const id = changes["userId"];
  if (id && id.currentValue !== id.previousValue) {
    this.fetchUser(id.currentValue);
  }
}

Tipizzazione per la sicurezza

Può leggere i valori da changes o direttamente dalla proprietà del componente; dopo ngOnChanges, la proprietà contiene già il valore corrente.

ngOnChanges() {
  // this.count already updated here
  this.total = this.count * 2;
}

Quando non usare OnChanges

Per lo stato derivato da un singolo input, un getter o un valore calcolato può essere più chiaro. Riservi ngOnChanges agli effetti collaterali che devono essere eseguiti quando gli input vengono aggiornati.

Più input contemporaneamente

Se diversi input cambiano nello stesso ciclo, ngOnChanges viene chiamato una volta sola, con tutti gli input presenti nella mappa SimpleChanges.

ngOnChanges(changes: SimpleChanges) {
  // both keys may be present
  if (changes["min"] || changes["max"]) {
    this.validateRange();
  }
}

Verifica rapida

Verifichi la Sua comprensione di OnChanges.

Riepilogo

L'hook OnChanges reagisce ai cambiamenti degli input tramite una mappa SimpleChanges contenente currentValue, previousValue e firstChange. Viene eseguito quando cambiano i riferimenti, quindi usi aggiornamenti immutabili.

Domande Frequenti

La lezione «ngOnChanges e modifiche agli input» è gratuita?

Sì — il testo completo di «ngOnChanges e modifiche agli input» è 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 «ngOnChanges e modifiche agli input»?

Reagisca alle modifiche nelle proprietà di input. 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 2 di 4.

Quanto tempo richiede la lezione «ngOnChanges e modifiche agli input»?

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