Du kommer att lära dig hur du korrekt konfigurerar navigering i din Angular-applikation och hur du överför data mellan komponenter via URL:en.

Vi har redan två rutter konfigurerade:

• / — visar listan över alla uppgifter;

• /task/:id — visar detaljer för en specifik uppgift via dess ID.

Vårt mål nu är att när användaren klickar på en knapp i en uppgiftskort, ska appen navigera till en detaljsida. TaskDetailsComponent hämtar då uppgiftens ID från URL:en och använder det för att hämta uppgiftens fullständiga data.

Hur komponenter interagerar

Låt oss definiera hur denna routinginteraktion kommer att fungera.

Vi lägger till en knapp inuti TaskComponent. När den klickas på kommer komponenten att avge en händelse till föräldrakomponenten (TaskListComponent). Föräldern hanterar själva navigeringen genom att uppdatera URL:en, vilket gör att Angular laddar TaskDetailsComponent för den valda uppgiften.

Varför inte routa direkt från TaskComponent?

Om vi någon gång vill återanvända TaskComponent på ett annat ställe (t.ex. i en modal eller en annan lista) vill vi inte att den ska vara bunden till routinglogik. Istället ska den bara meddela föräldern att en navigeringsåtgärd har begärts.

Detta tillvägagångssätt är enklare att testa och läsa, håller routinglogiken centraliserad och säkerställer att TaskComponent förblir ren och fokuserad på sina ansvarsområden.

Implementering av TaskComponent

Huvuduppgiften för TaskComponent är att avge händelser till sin förälder. Vi lägger till en knapp i mallen som anropar navigateToTask(), vilket kommer att avge händelsen.

När användaren klickar på info-knappen emitterar metoden navigateToTask() uppgiftens ID. Denna händelse fångas upp av föräldern (TaskListComponent), som därefter hanterar navigeringen med hjälp av Angulars router.

Implementering av TaskListComponent

Denna komponent ansvarar för att navigera till sidan med uppgiftsdetaljer.

För detta använder vi Angulars inbyggda Router-tjänst, som gör det möjligt att programmatiskt ändra URL:en och ladda rätt komponent baserat på rutten.

Vi lade till Router-tjänsten i konstruktorn. Angular tillhandahåller automatiskt denna tjänst när komponenten skapas, så ingen ytterligare konfiguration krävs.

Vi satte också upp en händelselyssnare för (onNavigate), som utlöser metoden navigateToTask() .

När metoden anropas (t.ex. när användaren klickar på informationsknappen), bygger den rutten /task/3, och routern uppdaterar URL:en och laddar TaskDetailsComponent.

Hämta en uppgift via ID i TaskDetailsComponent

När användaren navigerar till rutten /task/:id laddar Angular TaskDetailsComponent. Denna komponent ansvarar för:

• Att hämta ID från URL:en;

• Att hitta motsvarande uppgift via dess ID;

• Att visa uppgiftsdetaljer på skärmen.

Så här fungerar det:

Förklaring:

Tjänsten ActivatedRoute låter oss komma åt parametrarna för den aktuella rutten.

• Vi använder snapshot.paramMap.get('id') för att hämta värdet id från URL:en;

• Sedan konverterar vi det till ett nummer och skickar det till getTaskById(id) från TaskService för att hämta uppgiften;

• Metoden goToHomePage() navigerar tillbaka till huvudsidan där hela uppgiftslistan visas.

Genom att använda Angular Router har vi alltså framgångsrikt satt upp navigering mellan komponenter och skickat data via en URL-parameter. TaskListComponent hanterar navigeringen efter uppgifts-ID, och TaskDetailsComponent läser ID:t från rutten och laddar motsvarande uppgift.