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. Der tilføjes også knapper, der gør det muligt for brugeren at 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 tilføjelse, opdatering og sletning af 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 organiseret opretter vi en separat mappe til hver komponent inde 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 befinder dig i roden af dit projekt. Kør derefter følgende kommando:

Eller en kortere version:

Her er en oversigt over kommandoen:

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

Dette 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.