Implementering av Taskdetailscomponent
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 detaljerna för 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 det här skedet behöver vi endast uppgiftens id, titel och status — detta är all information vi har om en uppgift. Så i komponenten lägger vi bara till en task-egenskap.
component.ts
Glöm inte att importera CommonModule i komponenten, eftersom vi kommer att behöva den i mallen.
Nu skapar vi mallen och dess CSS-stilar:
component.html
component.css
Mallen använder direktivet *ngIf för att visa uppgiftskortet om uppgiften finns; annars visas ett meddelande "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
How do I connect the TaskDetailsComponent to the routing?
Can you show me how to display the task details in the template?
What should I do if the task is not found?
Awesome!
Completion rate improved to 3.13Implementering av Taskdetailscomponent
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 detaljerna för 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 det här skedet behöver vi endast uppgiftens id, titel och status — detta är all information vi har om en uppgift. Så i komponenten lägger vi bara till en task-egenskap.
component.ts
Glöm inte att importera CommonModule i komponenten, eftersom vi kommer att behöva den i mallen.
Nu skapar vi mallen och dess CSS-stilar:
component.html
component.css
Mallen använder direktivet *ngIf för att visa uppgiftskortet om uppgiften finns; annars visas ett meddelande "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!
