Hvilke komponenter er nødvendige?

Du ved allerede, hvad en komponent er. Nu er det tid til at oprette din egen komponent, som kan bruges i appen.

Applikationen vil bestå af to komponenter. Den første er TaskComponent, som er ansvarlig for at vise en enkelt opgave. Inde i denne komponent vises opgavens id, title og status. Du tilføjer også knapper, der lader brugeren fuldføre eller slette opgaven.

Den anden komponent er TaskListComponent, som fungerer som en wrapper for alle opgaver. Den indeholder et array af opgaver og viser hver enkelt ved hjælp af TaskComponent. Denne komponent håndterer også logikken for at tilføje, opdatere og slette opgaver.

Kort sagt håndterer TaskComponent udseende og adfærd for en enkelt opgave, mens TaskListComponent styrer den fulde liste af opgaver og interaktionen mellem dem.

Regler for oprettelse af en komponent

I Angular bruger du Angular CLI til at oprette komponenter. Det er et nyttigt værktøj, der automatisk genererer alle nødvendige filer og integrerer komponenten i den korrekte del af dit projekt.

Du skal oprette to komponenter: TaskComponent og TaskListComponent. Den ene skal vise individuelle opgaver, og den anden skal håndtere listen over opgaver.

Projektstruktur

For at holde tingene organiserede opretter vi en separat mappe til hver komponent i src/app-mappen. Dette gør det lettere at navigere og vedligeholde kodebasen, især når applikationen vokser.

Oprettelse af TaskComponent

For at generere en komponent bruger du Angular CLI. Åbn terminalen i VS Code, og sørg for, at du er i roden af dit projekt. Kør derefter følgende kommando:

Eller en kortere version:

Her er en gennemgang af kommandoen:

Efter at have kørt kommandoen, vil en ny task-mappe blive oprettet inde i src/app, som indeholder fire filer:

Det er standardopsætningen for enhver komponent. Den eneste forskel er præfikset i filnavnene (task i dette tilfælde), som stammer fra det navn, du angav i generate-kommandoen.

Oprettelse af TaskListComponent

Lad os nu oprette komponenten til opgavelisten, ligesom vi gjorde før. Kør følgende kommando:

Dette vil generere en ny task-list-mappe, der indeholder følgende filer:

Disse filer tjener samme formål som i TaskComponent, men nu er de til den anden komponent.

På dette tidspunkt har du to separate komponenter med en klar struktur: TaskComponent, som håndterer logikken og skabelonen for en enkelt opgave, og TaskListComponent, som administrerer hele listen af opgaver.