Implementering af Taskdetailscomponent
På hovedsiden af vores app ser brugeren en liste over alle opgaver. Dette giver et hurtigt overblik over, hvad der skal gøres.
Men hvad nu, hvis brugeren ønsker at se detaljerne for en bestemt opgave — dens unikke ID, præcise titel og status? Til dette formål skal vi oprette en separat side til opgavedetaljer.
Dette kapitel viser, hvordan du opbygger TaskDetailsComponent, som åbnes, når brugeren navigerer til en specifik URL og viser information om en bestemt opgave.
Oprettelse af en ny komponent
For at vise opgavedetaljer opretter vi en selvstændig komponent. Den vil være uafhængig og kan tilknyttes direkte i routing-konfigurationen.
Kør denne kommando:
Dette opretter filen task-details.component.ts sammen med dens template, styles og tests. Du kan trygt slette testfilen, hvis du ønsker det.
Implementering af komponenten
På dette tidspunkt har vi kun brug for opgavens id, titel og status — dette er alle de oplysninger, vi har om en opgave. Derfor tilføjer vi blot en task-egenskab i komponenten.
component.ts
Glem ikke at importere CommonModule i komponenten, da vi får brug for det i skabelonen.
Lad os nu oprette skabelonen og dens CSS-stilarter:
component.html
component.css
Skabelonen bruger direktivet *ngIf til at vise opgavekortet, hvis opgaven findes; ellers vises en "Task not found"-meddelelse ved hjælp af ng-template.
Inde i kortet vises ID, titel og status for opgaven samt en knap til at vende tilbage til hovedlisten over opgaver (vi tilføjer funktionaliteten til knappen senere).
Nu er vores TaskDetailsComponent klar til brug. Vi forbinder den til vores routing i næste kapitel.
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
Awesome!
Completion rate improved to 3.13Implementering af Taskdetailscomponent
Stryg for at vise menuen
På hovedsiden af vores app ser brugeren en liste over alle opgaver. Dette giver et hurtigt overblik over, hvad der skal gøres.
Men hvad nu, hvis brugeren ønsker at se detaljerne for en bestemt opgave — dens unikke ID, præcise titel og status? Til dette formål skal vi oprette en separat side til opgavedetaljer.
Dette kapitel viser, hvordan du opbygger TaskDetailsComponent, som åbnes, når brugeren navigerer til en specifik URL og viser information om en bestemt opgave.
Oprettelse af en ny komponent
For at vise opgavedetaljer opretter vi en selvstændig komponent. Den vil være uafhængig og kan tilknyttes direkte i routing-konfigurationen.
Kør denne kommando:
Dette opretter filen task-details.component.ts sammen med dens template, styles og tests. Du kan trygt slette testfilen, hvis du ønsker det.
Implementering af komponenten
På dette tidspunkt har vi kun brug for opgavens id, titel og status — dette er alle de oplysninger, vi har om en opgave. Derfor tilføjer vi blot en task-egenskab i komponenten.
component.ts
Glem ikke at importere CommonModule i komponenten, da vi får brug for det i skabelonen.
Lad os nu oprette skabelonen og dens CSS-stilarter:
component.html
component.css
Skabelonen bruger direktivet *ngIf til at vise opgavekortet, hvis opgaven findes; ellers vises en "Task not found"-meddelelse ved hjælp af ng-template.
Inde i kortet vises ID, titel og status for opgaven samt en knap til at vende tilbage til hovedlisten over opgaver (vi tilføjer funktionaliteten til knappen senere).
Nu er vores TaskDetailsComponent klar til brug. Vi forbinder den til vores routing i næste kapitel.
Tak for dine kommentarer!
