Implementering av Taskdetailskomponenten
På huvudsidan av vår app ser användaren en lista över alla uppgifter. Detta gör det enkelt att snabbt få en överblick över vad som behöver göras.
Men vad händer om användaren vill se detaljer om en specifik uppgift — dess unika ID, exakta titel och status? För detta behöver vi skapa en separat detaljsida för uppgiften.
Detta kapitel visar hur du bygger TaskDetailsComponent, som öppnas när användaren navigerar till en specifik URL och visar information om en viss uppgift.
Skapa en ny komponent
För att visa uppgiftsdetaljer skapar vi en fristående komponent. Den kommer att vara oberoende och kan kopplas direkt i routningskonfigurationen.
Kör detta kommando:
Detta kommer att skapa filen task-details.component.ts tillsammans med dess mall, stilar och tester. Du kan säkert ta bort testfilen om du vill.
Implementera komponenten
I detta skede behöver vi endast uppgiftens id, titel och status — detta är all information vi har om en uppgift. Därför lägger vi bara till en task-egenskap i komponenten.
component.ts
Glöm inte att importera CommonModule i komponenten, eftersom vi kommer att behöva det i mallen.
Nu skapar vi mallen och dess CSS-stilar:
component.html
component.css
Mallen använder direktivet *ngIf för att visa uppgiftdetaljer-kortet om uppgiften finns; annars visas meddelandet "Task not found" med hjälp av ng-template.
Inuti kortet visas ID, title och status för uppgiften, samt en knapp för att gå tillbaka till huvudlistan med uppgifter (vi lägger till knappens funktionalitet senare).
Nu är vår TaskDetailsComponent redo att användas. Vi kopplar den till vår routing i nästa kapitel.
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
Awesome!
Completion rate improved to 3.13Implementering av Taskdetailskomponenten
Svep för att visa menyn
På huvudsidan av vår app ser användaren en lista över alla uppgifter. Detta gör det enkelt att snabbt få en överblick över vad som behöver göras.
Men vad händer om användaren vill se detaljer om en specifik uppgift — dess unika ID, exakta titel och status? För detta behöver vi skapa en separat detaljsida för uppgiften.
Detta kapitel visar hur du bygger TaskDetailsComponent, som öppnas när användaren navigerar till en specifik URL och visar information om en viss uppgift.
Skapa en ny komponent
För att visa uppgiftsdetaljer skapar vi en fristående komponent. Den kommer att vara oberoende och kan kopplas direkt i routningskonfigurationen.
Kör detta kommando:
Detta kommer att skapa filen task-details.component.ts tillsammans med dess mall, stilar och tester. Du kan säkert ta bort testfilen om du vill.
Implementera komponenten
I detta skede behöver vi endast uppgiftens id, titel och status — detta är all information vi har om en uppgift. Därför lägger vi bara till en task-egenskap i komponenten.
component.ts
Glöm inte att importera CommonModule i komponenten, eftersom vi kommer att behöva det i mallen.
Nu skapar vi mallen och dess CSS-stilar:
component.html
component.css
Mallen använder direktivet *ngIf för att visa uppgiftdetaljer-kortet om uppgiften finns; annars visas meddelandet "Task not found" med hjälp av ng-template.
Inuti kortet visas ID, title och status för uppgiften, samt en knapp för att gå tillbaka till huvudlistan med uppgifter (vi lägger till knappens funktionalitet senare).
Nu är vår TaskDetailsComponent redo att användas. Vi kopplar den till vår routing i nästa kapitel.
Tack för dina kommentarer!
