Angular Academy · leksjon

ngOnChanges og endringer i input

Reager på endringer i input-egenskaper.

Leksjon 2 av 413 trinn

ngOnChanges og endringer i input er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Reagere på endringer i inndata

OnChanges-hooken lar en komponent reagere hver gang @Input-egenskapene endres. Angular kaller ngOnChanges før ngOnInit og ved hver oppdatering av inndata.

Implementere OnChanges

Implementer grensesnittet OnChanges og legg til en ngOnChanges-metode som mottar et SimpleChanges-objekt.

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);
  }
}

Objektet SimpleChanges

SimpleChanges er et map som bruker inndatanavnet som nøkkel. Hver oppføring er en SimpleChange med currentValue, previousValue og firstChange.

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

Oppdage den første endringen

Flagget firstChange er true første gang en inndata settes. Bruk det til å skille initialisering fra senere oppdateringer.

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

Reagere på en bestemt inndata

Kontroller alltid at nøkkelen finnes før De leser den, siden ikke alle inndata endres i hver syklus.

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

Referansebasert deteksjon

ngOnChanges utløses ved endringer i referansen for objekter og arrayer. Hvis De endrer et objekt som er sendt inn som inndata, utløses den IKKE.

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

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

Rekkefølge med ngOnInit

Ved opprettelse kjører ngOnChanges først med de opprinnelige inndataene, og deretter ngOnInit. Etter dette kjører ngOnChanges på nytt hver gang inndataene endres.

Sammenligne gamle og nye verdier

En vanlig bruk er å reagere bare når en verdi faktisk er annerledes, for eksempel ved å laste inn data på nytt når en id-inndata endres.

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

Typebestemming for sikkerhet

De kan lese verdier fra changes eller direkte fra komponentegenskapen. Etter ngOnChanges inneholder egenskapen allerede den gjeldende verdien.

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

Når bør OnChanges ikke brukes?

For avledet tilstand fra én enkelt inndata kan en getter eller beregnet verdi være ryddigere. Bruk ngOnChanges til bivirkninger som må kjøres når inndata oppdateres.

Flere inndata samtidig

Hvis flere inndata endres i samme syklus, kalles ngOnChanges én gang, med alle endringene i SimpleChanges-mappet.

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

Rask kontroll

Test forståelsen Deres av OnChanges.

Besvar den i den interaktive leksjonen

Oppsummering

OnChanges-hooken reagerer på endringer i inndata via et SimpleChanges-map med currentValue, previousValue og firstChange. Den utløses ved referanseendringer, så bruk uforanderlige oppdateringer.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 38
Leksjoner: 144

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «ngOnChanges og endringer i input» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «ngOnChanges og endringer i input», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «ngOnChanges og endringer i input»?

Reager på endringer i input-egenskaper. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Angular Academy?

Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «ngOnChanges og endringer i input»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?

Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Angular Academy