Vilka komponenter behövs?

Du vet redan vad en komponent är. Nu är det dags att skapa din egen komponent som kan användas i appen.

Applikationen kommer att bestå av två komponenter. Den första är TaskComponent, som ansvarar för att visa en enskild task. Inuti denna komponent visas taskens id, title och status. Du kommer även att lägga till knappar som låter användaren slutföra eller ta bort tasken.

Den andra komponenten är TaskListComponent, som fungerar som en behållare för alla tasks. Den innehåller en array av tasks och visar varje enskild med hjälp av TaskComponent. Denna komponent hanterar även logiken för att lägga till, uppdatera och ta bort tasks.

Sammanfattningsvis hanterar TaskComponent utseende och beteende för en enskild task, medan TaskListComponent administrerar hela listan av tasks och interaktionen mellan dem.

Regler för att skapa en komponent

I Angular använder du Angular CLI för att skapa komponenter. Det är ett praktiskt verktyg som automatiskt genererar alla nödvändiga filer och integrerar komponenten i rätt del av ditt projekt.

Du behöver skapa två komponenter: TaskComponent och TaskListComponent. Den ena ansvarar för att visa enskilda uppgifter, och den andra hanterar listan av uppgifter.

Projektstruktur

För att hålla ordning skapar vi en separat mapp för varje komponent i katalogen src/app. Detta gör kodbasen enklare att navigera och underhålla, särskilt när applikationen växer.

Skapa TaskComponent

För att generera en komponent använder du Angular CLI. Öppna terminalen i VS Code och se till att du befinner dig i projektets rotkatalog. Kör sedan följande kommando:

Eller en kortare version:

Här är en genomgång av kommandot:

Efter att ha kört kommandot kommer en ny task-mapp att skapas i src/app, som innehåller fyra filer:

Detta är standardinställningen för varje komponent. Den enda skillnaden är prefixet i filnamnen (task i detta fall), vilket kommer från namnet du angav i generate-kommandot.

Skapa TaskListComponent

Nu ska vi skapa komponenten för uppgiftslistan, precis som vi gjorde tidigare. Kör följande kommando:

Detta kommer att generera en ny task-list-mapp som innehåller följande filer:

Dessa filer har samma syfte som i TaskComponent, men nu gäller de för den andra komponenten.

Vid det här laget har du två separata komponenter med en tydlig struktur: TaskComponent, som hanterar logik och mall för en enskild uppgift, och TaskListComponent, som hanterar hela listan av uppgifter.