Du har opprettet TaskService, som håndterer lagring og administrasjon av oppgavelisten. Tjenesten i seg selv samhandler imidlertid ikke med brukergrensesnittet. For å hente data fra tjenesten inn i komponentens mal, må du injisere tjenesten i den tilhørende komponenten.

Nå skal du se hvordan Angular automatisk hjelper til med å koble tjenester til komponenter ved hjelp av Dependency Injection (DI), og hvordan tjenesten fungerer inne i komponenten.

Hva er Dependency Injection?

Takket være DI oppretter ikke komponenter tjenesteinstanser selv — de mottar bare en allerede opprettet instans. Angular håndterer leveringen av nødvendige objekter til de som trenger dem.

Dette fungerer fordi tjenesten er dekorert med:

@Injectable({
  providedIn: 'root'
})

Denne dekoratøren instruerer Angular om å opprette én enkelt instans (singleton) av tjenesten for hele appen og gjøre den tilgjengelig for DI.

Injisering av tjenesten i en komponent

Nå skal vi injisere TaskService i TaskListComponent slik at den kan hente oppgavelisten og samhandle med den.

Slik ser komponentkoden ut:

Vi importerer TaskService, Task-grensesnittet, og andre komponenter og moduler som trengs for malen.

I komponentens konstruktør legger vi til tjenesten via Dependency Injection:

Du lagrer den som et privat felt for bruk i komponentmetoder. Rett etter at komponenten er opprettet (inne i konstruktøren), henter vi oppgavelisten. Denne listen brukes deretter i HTML-malen.

Metodene deleteTask og toggleStatus kaller tjenestens funksjoner for å slette en oppgave eller endre dens status, og oppdaterer deretter den lokale tasks-arrayen slik at brukergrensesnittet gjenspeiler endringene.

Denne tilnærmingen holder komponenten enkel: den vet ikke hvordan dataene lagres eller håndteres — den ber bare tjenesten om å oppdatere dem. Dette gir en tydelig ansvarsfordeling: komponenter håndterer visningen, og tjenester håndterer dataene.