Palvelun Injektointi Komponenttiin
Loit TaskService-palvelun, joka vastaa tehtävälistan tallentamisesta ja hallinnasta. Palvelu itsessään ei kuitenkaan ole vuorovaikutuksessa käyttöliittymän kanssa. Saadaksesi tiedot palvelusta komponentin malliin, sinun täytyy injektoida palvelu vastaavaan komponenttiin.
Seuraavaksi näet, kuinka Angular auttaa automaattisesti yhdistämään palvelut komponentteihin käyttämällä Dependency Injectionia (DI) ja miten palvelu toimii komponentin sisällä.
Mikä on Dependency Injection?
Dependency Injection (DI) on suunnittelumalli, jossa Angular injektoi automaattisesti tarvittavat riippuvuudet (kuten palvelut) komponentin konstruktoriin.
DI:n ansiosta komponentit eivät luo palveluinstansseja itse — ne vastaanottavat valmiiksi luodun instanssin. Angular huolehtii tarvittavien olioiden toimittamisesta niille, jotka niitä tarvitsevat.
Tämä toimii, koska palvelu on koristeltu seuraavasti:
@Injectable({
providedIn: 'root'
})
Tämä dekoratori ohjeistaa Angularia luomaan yhden instanssin (singletonin) palvelusta koko sovellukselle ja tekemään sen saataville DI:lle.
Palvelun injektointi komponenttiin
Seuraavaksi injektoidaan TaskService TaskListComponent-komponenttiin, jotta se voi hakea tehtävälistan ja käsitellä sitä.
Tältä komponentin koodi näyttää:
task-list.ts
Tuodaan TaskService, Task-rajapinta sekä muut komponentit ja moduulit, joita mallipohjassa tarvitaan.
Komponentin konstruktorissa lisätään palvelu riippuvuussijoituksen avulla:
task-list.ts
Palvelu tallennetaan yksityisenä kenttänä, jotta sitä voidaan käyttää komponentin metodeissa. Heti komponentin luonnin jälkeen (konstruktorissa) haetaan tehtävälista. Tätä listaa käytetään HTML-mallipohjassa.
Metodit deleteTask ja toggleStatus kutsuvat palvelun funktioita poistaakseen tehtävän tai vaihtaakseen sen tilaa, ja päivittävät sitten paikallisen tasks-taulukon, jotta käyttöliittymä heijastaa muutokset.
Tämä lähestymistapa pitää komponentin yksinkertaisena: se ei tiedä, miten data tallennetaan tai käsitellään — se vain pyytää palvelua päivittämään sen. Tämä erottaa vastuut: komponentit hallitsevat näkymää ja palvelut hallitsevat dataa.
1. Mitä Dependency Injection (DI) tarkoittaa Angularissa?
2. Miksi päivitämme this.tasks sen jälkeen, kun olemme kutsuneet deleteTask- tai toggleStatus-metodia?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Awesome!
Completion rate improved to 3.13Palvelun Injektointi Komponenttiin
Pyyhkäise näyttääksesi valikon
Loit TaskService-palvelun, joka vastaa tehtävälistan tallentamisesta ja hallinnasta. Palvelu itsessään ei kuitenkaan ole vuorovaikutuksessa käyttöliittymän kanssa. Saadaksesi tiedot palvelusta komponentin malliin, sinun täytyy injektoida palvelu vastaavaan komponenttiin.
Seuraavaksi näet, kuinka Angular auttaa automaattisesti yhdistämään palvelut komponentteihin käyttämällä Dependency Injectionia (DI) ja miten palvelu toimii komponentin sisällä.
Mikä on Dependency Injection?
Dependency Injection (DI) on suunnittelumalli, jossa Angular injektoi automaattisesti tarvittavat riippuvuudet (kuten palvelut) komponentin konstruktoriin.
DI:n ansiosta komponentit eivät luo palveluinstansseja itse — ne vastaanottavat valmiiksi luodun instanssin. Angular huolehtii tarvittavien olioiden toimittamisesta niille, jotka niitä tarvitsevat.
Tämä toimii, koska palvelu on koristeltu seuraavasti:
@Injectable({
providedIn: 'root'
})
Tämä dekoratori ohjeistaa Angularia luomaan yhden instanssin (singletonin) palvelusta koko sovellukselle ja tekemään sen saataville DI:lle.
Palvelun injektointi komponenttiin
Seuraavaksi injektoidaan TaskService TaskListComponent-komponenttiin, jotta se voi hakea tehtävälistan ja käsitellä sitä.
Tältä komponentin koodi näyttää:
task-list.ts
Tuodaan TaskService, Task-rajapinta sekä muut komponentit ja moduulit, joita mallipohjassa tarvitaan.
Komponentin konstruktorissa lisätään palvelu riippuvuussijoituksen avulla:
task-list.ts
Palvelu tallennetaan yksityisenä kenttänä, jotta sitä voidaan käyttää komponentin metodeissa. Heti komponentin luonnin jälkeen (konstruktorissa) haetaan tehtävälista. Tätä listaa käytetään HTML-mallipohjassa.
Metodit deleteTask ja toggleStatus kutsuvat palvelun funktioita poistaakseen tehtävän tai vaihtaakseen sen tilaa, ja päivittävät sitten paikallisen tasks-taulukon, jotta käyttöliittymä heijastaa muutokset.
Tämä lähestymistapa pitää komponentin yksinkertaisena: se ei tiedä, miten data tallennetaan tai käsitellään — se vain pyytää palvelua päivittämään sen. Tämä erottaa vastuut: komponentit hallitsevat näkymää ja palvelut hallitsevat dataa.
1. Mitä Dependency Injection (DI) tarkoittaa Angularissa?
2. Miksi päivitämme this.tasks sen jälkeen, kun olemme kutsuneet deleteTask- tai toggleStatus-metodia?
Kiitos palautteestasi!
