Du kommer att lära dig hur du korrekt ställer in 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 ett 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 i TaskComponent. När den klickas på kommer komponenten att sända ett event 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 navigera 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 sända events till sin förälder. Vi lägger till en knapp i mallen som anropar navigateToTask(), vilket kommer att sända eventet.

När användaren klickar på informationsknappen, avger metoden navigateToTask() uppgiften ID. Denna händelse fångas upp av föräldern (TaskListComponent), som sedan hanterar navigeringen med hjälp av Angulars router.

Implementering av TaskListComponent

Denna komponent ansvarar för att navigera till detaljsidan för uppgiften.

För detta använder vi Angulars inbyggda Router-tjänst, som gör det möjligt att programmässigt ä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 samt 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:

• Hämtning av ID från URL:en;

• Sökning av motsvarande uppgift via dess ID;

• Visning av uppgiftsdetaljer på skärmen.

Så här fungerar det:

Förklaring:

Tjänsten ActivatedRoute gör det möjligt att komma åt parametrarna för den aktuella rutten.

• Vi använder snapshot.paramMap.get('id') för att hämta värdet för 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 konfigurerat 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.