Angular Academy · Oppitunti

ngOnChanges ja syötemuutokset

Reagoikaa syöteominaisuuksien muutoksiin.

Oppitunti 2/413 vaihetta

ngOnChanges ja syötemuutokset on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Reagointi syötteiden muutoksiin

OnChanges-koukun avulla komponentti voi reagoida aina, kun sen @Input-ominaisuudet muuttuvat. Angular kutsuu ngOnChanges-metodia ennen ngOnInit-metodia ja jokaisen syötteen päivityksen yhteydessä.

OnChangesin toteuttaminen

Toteuta OnChanges-rajapinta ja lisää ngOnChanges-metodi, joka vastaanottaa SimpleChanges-olion.

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

SimpleChanges-olio

SimpleChanges on syötteen nimen mukaan avaimettu map-rakenne. Jokainen alkio on SimpleChange, jolla on ominaisuudet currentValue, previousValue ja firstChange.

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

Ensimmäisen muutoksen tunnistaminen

firstChange-lippu on true-arvoinen, kun syöte asetetaan ensimmäisen kerran. Sen avulla voit erottaa alustamisen myöhemmistä päivityksistä.

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

Reagointi tiettyyn syötteeseen

Tarkista aina ennen arvon lukemista, että avain on olemassa, koska kaikki syötteet eivät muutu jokaisella kierroksella.

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

Viitteisiin perustuva tunnistus

ngOnChanges suoritetaan olioiden ja taulukoiden viitteiden muuttuessa. Syötteenä välitetyn olion muuttaminen suoraan EI käynnistä sitä.

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

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

Järjestys suhteessa ngOnInit-metodiin

Luomisen yhteydessä ngOnChanges suoritetaan ensin alkuperäisillä syötteillä ja sen jälkeen ngOnInit. Tämän jälkeen ngOnChanges suoritetaan uudelleen aina syötteiden muuttuessa.

Vanhojen ja uusien arvojen vertaaminen

Yleinen käyttötapa on reagoida vain, kun arvo todella muuttuu, esimerkiksi ladata data uudelleen, kun id-syöte muuttuu.

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

Tyypitys turvallisuuden vuoksi

Voit lukea arvoja changes-oliosta tai suoraan komponentin ominaisuudesta; ngOnChanges-metodin jälkeen ominaisuudessa on jo nykyinen arvo.

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

Milloin OnChangesia ei pidä käyttää

Yhdestä syötteestä johdettuun tilaan getter tai laskettu arvo voi olla selkeämpi. Käytä ngOnChanges-metodia sivuvaikutuksiin, jotka on suoritettava syötteiden päivittyessä.

Useita syötteitä kerralla

Jos useat syötteet muuttuvat samalla kierroksella, ngOnChanges kutsutaan kerran, ja kaikki ne ovat mukana SimpleChanges-map-rakenteessa.

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

Pikatarkistus

Testaa, miten hyvin ymmärrät OnChangesin.

Vastaa interaktiivisessa oppitunnissa

Kertaus

OnChanges-koukku reagoi syötteiden muutoksiin SimpleChanges-map-rakenteen avulla. Se sisältää ominaisuudet currentValue, previousValue ja firstChange. Koukku suoritetaan viitteiden muuttuessa, joten käytä muuttumattomia päivityksiä.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 38
Oppitunnit: 144

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”ngOnChanges ja syötemuutokset” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “ngOnChanges ja syötemuutokset”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”ngOnChanges ja syötemuutokset”?

Reagoikaa syöteominaisuuksien muutoksiin. Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”ngOnChanges ja syötemuutokset”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?

Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Angular Academy