Serviceinjektion i en Komponent
Du har oprettet TaskService, som håndterer lagring og administration af opgavelisten. Tjenesten interagerer dog ikke direkte med brugergrænsefladen. For at få data 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?
Dependency Injection (DI) er et designmønster, hvor Angular automatisk injicerer de nødvendige afhængigheder (som tjenester) i en komponents konstruktør.
Takket være DI opretter komponenter ikke selv instanser af services — 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 om at oprette én 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:
task-list.ts
Vi importerer TaskService, Task-interfacet samt andre nødvendige komponenter og moduler til skabelonen.
I komponentens konstruktør tilføjes servicen via Dependency Injection:
task-list.ts
Servicen gemmes som et privat felt til brug i komponentens metoder. Umiddelbart efter komponenten er oprettet (i konstruktøren), hentes opgavelisten. Denne liste anvendes 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 array tasks, 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.
1. Hvad er Dependency Injection (DI) i Angular?
2. Hvorfor opdaterer vi this.tasks efter at have kaldt deleteTask eller toggleStatus?
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
Awesome!
Completion rate improved to 3.13Serviceinjektion i en Komponent
Stryg for at vise menuen
Du har oprettet TaskService, som håndterer lagring og administration af opgavelisten. Tjenesten interagerer dog ikke direkte med brugergrænsefladen. For at få data 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?
Dependency Injection (DI) er et designmønster, hvor Angular automatisk injicerer de nødvendige afhængigheder (som tjenester) i en komponents konstruktør.
Takket være DI opretter komponenter ikke selv instanser af services — 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 om at oprette én 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:
task-list.ts
Vi importerer TaskService, Task-interfacet samt andre nødvendige komponenter og moduler til skabelonen.
I komponentens konstruktør tilføjes servicen via Dependency Injection:
task-list.ts
Servicen gemmes som et privat felt til brug i komponentens metoder. Umiddelbart efter komponenten er oprettet (i konstruktøren), hentes opgavelisten. Denne liste anvendes 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 array tasks, 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.
1. Hvad er Dependency Injection (DI) i Angular?
2. Hvorfor opdaterer vi this.tasks efter at have kaldt deleteTask eller toggleStatus?
Tak for dine kommentarer!
