Palvelun Injektointi Komponenttiin
Luoit TaskService-palvelun, joka vastaa tehtävälistan tallentamisesta ja hallinnasta. Palvelu itsessään ei kuitenkaan ole vuorovaikutuksessa käyttöliittymän kanssa. Jotta saat palvelun tiedot komponentin mallipohjaan, sinun täytyy injektoida palvelu kyseiseen komponenttiin.
Seuraavaksi näet, kuinka Angular yhdistää palvelut komponentteihin automaattisesti riippuvuuksien injektoinnin (Dependency Injection, DI) avulla ja miten palvelu toimii komponentin sisällä.
Mikä on riippuvuuksien injektointi?
Riippuvuuksien injektointi (Dependency Injection, DI) on suunnittelumalli, jossa Angular lisää automaattisesti tarvittavat riippuvuudet (kuten palvelut) komponentin konstruktoriin.
DI:n ansiosta komponentit eivät luo palveluinstansseja itse — ne vastaanottavat jo 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 (singleton) 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 mallipohja tarvitsee.
Komponentin konstruktorissa lisätään palvelu riippuvuussidonnan avulla:
task-list.ts
Palvelu tallennetaan yksityisenä kenttänä, jota käytetään 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?
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
Luoit TaskService-palvelun, joka vastaa tehtävälistan tallentamisesta ja hallinnasta. Palvelu itsessään ei kuitenkaan ole vuorovaikutuksessa käyttöliittymän kanssa. Jotta saat palvelun tiedot komponentin mallipohjaan, sinun täytyy injektoida palvelu kyseiseen komponenttiin.
Seuraavaksi näet, kuinka Angular yhdistää palvelut komponentteihin automaattisesti riippuvuuksien injektoinnin (Dependency Injection, DI) avulla ja miten palvelu toimii komponentin sisällä.
Mikä on riippuvuuksien injektointi?
Riippuvuuksien injektointi (Dependency Injection, DI) on suunnittelumalli, jossa Angular lisää automaattisesti tarvittavat riippuvuudet (kuten palvelut) komponentin konstruktoriin.
DI:n ansiosta komponentit eivät luo palveluinstansseja itse — ne vastaanottavat jo 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 (singleton) 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 mallipohja tarvitsee.
Komponentin konstruktorissa lisätään palvelu riippuvuussidonnan avulla:
task-list.ts
Palvelu tallennetaan yksityisenä kenttänä, jota käytetään 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?
Kiitos palautteestasi!
