Skapa en Anpassad Tjänst i Angular
Skapa en tjänst
Angular tillhandahåller ett smidigt CLI-kommando för att snabbt generera en tjänst, vilket skapar nödvändiga filer och importer:
Efter att ha kört detta kommando skapar Angular två filer:
-
task.service.ts— själva tjänstfilen; -
task.service.spec.ts— en testfil (kan tas bort).
Här är det initiala innehållet i task.service.ts:
task-service.ts
@Injectable-dekorationen anger för Angular att denna tjänst kan injiceras i andra klasser.
providedIn: 'root' innebär att Angular automatiskt registrerar tjänsten i rotmodulen och skapar en enda instans av den för hela applikationen.
Singleton är ett designmönster som säkerställer att en klass endast har en instans och tillhandahåller en global åtkomstpunkt till den.
Komponent A, Komponent B eller någon annan komponent — alla får samma instans av tjänsten. Detta är mycket praktiskt eftersom du kan lagra delad data (som en uppgiftslista) och undvika duplicerad logik.
Det är därför en tjänst blir den enda sanningskällan för en specifik del av din applikations logik eller data. Om du är nyfiken kan du läsa mer om singleton-mönstret i denna artikel.
Lägga till logik i tjänsten
Låt oss gå vidare till att faktiskt bygga logiken för din tjänst. Här är vad du vill att den ska göra:
-
Lagra en lista med uppgifter;
-
Returnera uppgiftslistan;
-
Ta bort uppgifter;
-
Växla slutförandestatus för uppgifter.
Först definierar vi hur en uppgift ser ut genom att skapa ett TypeScript-interface:
task-interface.ts
Detta interface hjälper till att tydligt definiera strukturen för en uppgift — det inkluderar ett id, en titel och en slutförandestatus. Du har inte använt interface tidigare, men att lägga till ett här gör koden enklare att förstå och arbeta med.
Nu bygger vi tjänsten som hanterar din uppgiftslista:
task-service.ts
I det här exemplet lagras uppgiftsdata direkt i koden i en privat tasks-array.
För att tillåta andra delar av applikationen att komma åt uppgiftslistan används metoden getTasks(). Den returnerar en kopia av arrayen med hjälp av spread-syntaxen ([...]), vilket skyddar originaldatan från oavsiktliga ändringar.
Metoden deleteTask(id: number) tar bort en uppgift genom att filtrera bort den med motsvarande ID och uppdaterar listan.
En annan viktig metod är toggleTaskStatus(id: number). Den hittar uppgiften via dess ID och växlar dess slutförandestatus — om uppgiften var markerad som slutförd (true) blir den ofullständig (false), och vice versa.
Du kanske känner igen mycket av denna logik från din TaskListComponent. Nu har allt flyttats till TaskService, vilket hjälper till att strukturera dina komponenter och samlar logiken på ett ställe.
Denna tjänst är nu grunden som gör det möjligt för dina komponenter att interagera med uppgiftslistan — utan att duplicera logik.
1. Varför skapar du en tjänst i Angular?
2. Vad betyder providedIn: 'root' i @Injectable-dekorationen?
3. Varför returnerar du [...this.tasks] istället för bara this.tasks i getTasks()?
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Can you explain how to use this service inside a component?
What does the task interface look like in code?
Why is it important to return a copy of the tasks array instead of the original?
Awesome!
Completion rate improved to 3.13Skapa en Anpassad Tjänst i Angular
Svep för att visa menyn
Skapa en tjänst
Angular tillhandahåller ett smidigt CLI-kommando för att snabbt generera en tjänst, vilket skapar nödvändiga filer och importer:
Efter att ha kört detta kommando skapar Angular två filer:
-
task.service.ts— själva tjänstfilen; -
task.service.spec.ts— en testfil (kan tas bort).
Här är det initiala innehållet i task.service.ts:
task-service.ts
@Injectable-dekorationen anger för Angular att denna tjänst kan injiceras i andra klasser.
providedIn: 'root' innebär att Angular automatiskt registrerar tjänsten i rotmodulen och skapar en enda instans av den för hela applikationen.
Singleton är ett designmönster som säkerställer att en klass endast har en instans och tillhandahåller en global åtkomstpunkt till den.
Komponent A, Komponent B eller någon annan komponent — alla får samma instans av tjänsten. Detta är mycket praktiskt eftersom du kan lagra delad data (som en uppgiftslista) och undvika duplicerad logik.
Det är därför en tjänst blir den enda sanningskällan för en specifik del av din applikations logik eller data. Om du är nyfiken kan du läsa mer om singleton-mönstret i denna artikel.
Lägga till logik i tjänsten
Låt oss gå vidare till att faktiskt bygga logiken för din tjänst. Här är vad du vill att den ska göra:
-
Lagra en lista med uppgifter;
-
Returnera uppgiftslistan;
-
Ta bort uppgifter;
-
Växla slutförandestatus för uppgifter.
Först definierar vi hur en uppgift ser ut genom att skapa ett TypeScript-interface:
task-interface.ts
Detta interface hjälper till att tydligt definiera strukturen för en uppgift — det inkluderar ett id, en titel och en slutförandestatus. Du har inte använt interface tidigare, men att lägga till ett här gör koden enklare att förstå och arbeta med.
Nu bygger vi tjänsten som hanterar din uppgiftslista:
task-service.ts
I det här exemplet lagras uppgiftsdata direkt i koden i en privat tasks-array.
För att tillåta andra delar av applikationen att komma åt uppgiftslistan används metoden getTasks(). Den returnerar en kopia av arrayen med hjälp av spread-syntaxen ([...]), vilket skyddar originaldatan från oavsiktliga ändringar.
Metoden deleteTask(id: number) tar bort en uppgift genom att filtrera bort den med motsvarande ID och uppdaterar listan.
En annan viktig metod är toggleTaskStatus(id: number). Den hittar uppgiften via dess ID och växlar dess slutförandestatus — om uppgiften var markerad som slutförd (true) blir den ofullständig (false), och vice versa.
Du kanske känner igen mycket av denna logik från din TaskListComponent. Nu har allt flyttats till TaskService, vilket hjälper till att strukturera dina komponenter och samlar logiken på ett ställe.
Denna tjänst är nu grunden som gör det möjligt för dina komponenter att interagera med uppgiftslistan — utan att duplicera logik.
1. Varför skapar du en tjänst i Angular?
2. Vad betyder providedIn: 'root' i @Injectable-dekorationen?
3. Varför returnerar du [...this.tasks] istället för bara this.tasks i getTasks()?
Tack för dina kommentarer!
