Du har oprettet TaskService, som håndterer lagring og administration af opgavelisten. Tjenesten interagerer dog ikke direkte med brugergrænsefladen. For at få dataene fra tjenesten ind i komponentens skabelon, skal du injicere tjenesten i den tilsvarende komponent.

Nu vil du se, hvordan Angular automatisk hjælper med at forbinde tjenester til komponenter ved hjælp af Dependency Injection (DI), og hvordan tjenesten fungerer inde i komponenten.

Hvad er Dependency Injection?

Takket være DI opretter komponenter ikke selv serviceinstanser — de modtager blot en allerede oprettet instans. Angular håndterer leveringen af de nødvendige objekter til dem, der har brug for dem.

Dette fungerer, fordi servicen er dekoreret med:

@Injectable({
  providedIn: 'root'
})

Denne dekoratør instruerer Angular i at oprette en enkelt instans (singleton) af servicen for hele appen og gøre den tilgængelig for DI.

Injicering af servicen i en komponent

Nu skal vi injicere TaskService i TaskListComponent, så den kan hente opgavelisten og interagere med den.

Her er, hvordan komponentkoden ser ud:

Vi importerer TaskService, Task-interfacet samt andre nødvendige komponenter og moduler til skabelonen.

I komponentens konstruktør tilføjer vi servicen via Dependency Injection:

Du gemmer den som et privat felt til brug i komponentens metoder. Lige efter at komponenten er oprettet (inde i konstruktøren), henter vi opgavelisten. Denne liste bruges derefter i HTML-skabelonen.

Metoderne deleteTask og toggleStatus kalder service-funktionerne for at slette en opgave eller ændre dens status og opdaterer derefter det lokale tasks array, så brugergrænsefladen afspejler ændringerne.

Denne tilgang holder komponenten enkel: den ved ikke, hvordan dataene gemmes eller håndteres — den beder blot servicen om at opdatere dem. Dette adskiller ansvarsområder: komponenter håndterer visningen, og services håndterer dataene.