Du har skapat TaskService, som hanterar lagring och hantering av uppgiftslistan. Tjänsten i sig interagerar dock inte med användargränssnittet. För att få data från tjänsten till komponentens mall behöver du injicera tjänsten i motsvarande komponent.

Nu kommer du att se hur Angular automatiskt hjälper till att koppla tjänster till komponenter med hjälp av Dependency Injection (DI) och hur tjänsten fungerar inuti komponenten.

Vad är Dependency Injection?

Tack vare DI skapar komponenter inte själva instanser av tjänster — de får helt enkelt en redan skapad instans. Angular hanterar leveransen av de nödvändiga objekten till de som behöver dem.

Detta fungerar eftersom tjänsten är dekorerad med:

@Injectable({
  providedIn: 'root'
})

Denna dekoratör instruerar Angular att skapa en enda instans (singleton) av tjänsten för hela applikationen och göra den tillgänglig för DI.

Injicera tjänsten i en komponent

Nu ska vi injicera TaskService i TaskListComponent så att den kan hämta och interagera med uppgiftslistan.

Så här ser komponentkoden ut:

Vi importerar TaskService, Task-gränssnittet samt andra komponenter och moduler som behövs för mallen.

I komponentens konstruktor lägger vi till tjänsten via beroendeinjektion:

Du lagrar den som ett privat fält för att använda i komponentens metoder. Direkt efter att komponenten har skapats (inuti konstruktorn) hämtar vi uppgiftslistan. Denna lista används sedan i HTML-mallen.

Metoderna deleteTask och toggleStatus anropar tjänstens funktioner för att ta bort en uppgift eller växla dess status, och uppdaterar sedan den lokala arrayen tasks så att användargränssnittet återspeglar ändringarna.

Detta tillvägagångssätt håller komponenten enkel: den vet inte hur data lagras eller hanteras — den ber bara tjänsten att uppdatera den. Detta separerar ansvarsområden: komponenter hanterar vyn och tjänster hanterar datan.