Angular Academy · Lekcja

ngOnChanges i zmiany danych wejściowych

Reaguj na zmiany właściwości wejściowych.

ngOnChanges i zmiany danych wejściowych to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Reagowanie na zmiany danych wejściowych

Hak OnChanges pozwala komponentowi reagować za każdym razem, gdy zmienią się jego właściwości @Input. Angular wywołuje ngOnChanges przed ngOnInit oraz po każdej aktualizacji danych wejściowych.

Implementowanie OnChanges

Zaimplementuj interfejs OnChanges i dodaj metodę ngOnChanges, która otrzymuje obiekt 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);
  }
}

Obiekt SimpleChanges

SimpleChanges to mapa, której kluczami są nazwy danych wejściowych. Każdy wpis zawiera obiekt SimpleChange z właściwościami currentValue, previousValue i firstChange.

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

Wykrywanie pierwszej zmiany

Flaga firstChange ma wartość true przy pierwszym ustawieniu danych wejściowych. Użyj jej, aby odróżnić inicjalizację od późniejszych aktualizacji.

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

Reagowanie na konkretne dane wejściowe

Zawsze sprawdzaj, czy dany klucz istnieje, zanim go odczytasz, ponieważ nie każde dane wejściowe zmieniają się w każdym cyklu.

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

Wykrywanie na podstawie referencji

ngOnChanges uruchamia się po zmianie referencji obiektów i tablic. Modyfikacja obiektu przekazanego jako dane wejściowe NIE wywoła tej metody.

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

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

Kolejność względem ngOnInit

Podczas tworzenia komponentu najpierw uruchamia się ngOnChanges z początkowymi danymi wejściowymi, a następnie ngOnInit. Później ngOnChanges uruchamia się ponownie za każdym razem, gdy zmienią się dane wejściowe.

Porównywanie starych i nowych wartości

Typowym zastosowaniem jest reagowanie tylko wtedy, gdy wartość rzeczywiście się zmieniła, na przykład ponowne wczytanie danych po zmianie danych wejściowych id.

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

Bezpieczne typowanie

Wartości można odczytywać z obiektu changes albo bezpośrednio z właściwości komponentu; po wykonaniu ngOnChanges właściwość zawiera już bieżącą wartość.

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

Kiedy nie używać OnChanges

W przypadku stanu pochodnego z pojedynczych danych wejściowych lepszym rozwiązaniem może być getter lub wartość obliczana. Rezerwuj ngOnChanges dla efektów ubocznych, które muszą być wykonywane po aktualizacji danych wejściowych.

Wiele danych wejściowych naraz

Jeśli kilka danych wejściowych zmieni się w tym samym cyklu, ngOnChanges zostanie wywołane raz, a wszystkie zmiany będą obecne w mapie SimpleChanges.

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

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat OnChanges.

Podsumowanie

Hak OnChanges reaguje na zmiany danych wejściowych za pomocą mapy SimpleChanges zawierającej currentValue, previousValue i firstChange. Uruchamia się po zmianie referencji, dlatego stosuj niezmienne aktualizacje.

Często zadawane pytania

Czy lekcja „ngOnChanges i zmiany danych wejściowych” jest bezpłatna?

Tak — pełny tekst „ngOnChanges i zmiany danych wejściowych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „ngOnChanges i zmiany danych wejściowych”?

Reaguj na zmiany właściwości wejściowych. Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „ngOnChanges i zmiany danych wejściowych”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy