Du lærer, hvordan du korrekt opsætter navigation i din Angular-applikation, samt hvordan du overfører data mellem komponenter ved hjælp af URL'en.

Vi har allerede to ruter konfigureret:

• / — viser listen over alle opgaver;

• /task/:id — viser detaljer om en specifik opgave via dens ID.

Vores mål nu er at sikre, at når brugeren klikker på en knap inde i et opgavekort, navigerer appen til en detaljeside. TaskDetailsComponent henter derefter opgavens ID fra URL'en og bruger det til at hente opgavens fulde data.

Hvordan komponenter interagerer

Lad os definere, hvordan denne routing-interaktion vil fungere.

Vi tilføjer en knap inde i TaskComponent. Når den klikkes, udsender komponenten en begivenhed til forældrekomponenten (TaskListComponent). Forælderen håndterer selve navigationen ved at opdatere URL'en, hvilket får Angular til at indlæse TaskDetailsComponent for den valgte opgave.

Hvorfor ikke route direkte fra TaskComponent?

Hvis vi på et tidspunkt ønsker at genbruge TaskComponent et andet sted (f.eks. i et modalvindue eller en anden liste), vil vi ikke have, at den er bundet til routing-logik. I stedet skal den blot give forælderen besked om, at en navigationshandling er ønsket.

Denne tilgang er lettere at teste og læse, holder routing-logikken centraliseret og sikrer, at TaskComponent forbliver ren og fokuseret på sine ansvarsområder.

Implementering af TaskComponent

Hovedopgaven for TaskComponent er at udsende begivenheder til sin forælder. Vi tilføjer en knap til skabelonen, der kalder navigateToTask(), som vil udsende begivenheden.

Når brugeren klikker på info-knappen, udsender navigateToTask()-metoden opgave-ID'et. Denne hændelse opfanges af forælderen (TaskListComponent), som derefter håndterer navigationen ved hjælp af Angulars router.

Implementering af TaskListComponent

Denne komponent er ansvarlig for at navigere til opgavedetaljesiden.

Til dette bruger vi Angulars indbyggede Router-service, som giver os mulighed for programmatisk at ændre URL'en og indlæse den relevante komponent baseret på ruten.

Vi tilføjede Router-servicen i konstruktøren. Angular stiller automatisk denne service til rådighed, når komponenten oprettes, så der er ikke behov for yderligere opsætning.

Vi opsatte også en event-lytter for (onNavigate), som udløser metoden navigateToTask() .

Når metoden kaldes (f.eks. når brugeren klikker på info-knappen), opbygges ruten /task/3, og routeren opdaterer URL'en og indlæser TaskDetailsComponent.

Hentning af en opgave efter ID i TaskDetailsComponent

Når brugeren navigerer til ruten /task/:id, indlæser Angular TaskDetailsComponent. Denne komponent har ansvaret for:

• Hentning af ID fra URL'en;

• Find den tilsvarende opgave ud fra dens ID;

• Visning af opgavedetaljer på skærmen.

Sådan fungerer det:

Forklaring:

ActivatedRoute-servicen giver adgang til parametrene for den aktuelle rute.

• Vi bruger snapshot.paramMap.get('id') til at udtrække id-værdien fra URL'en;

• Derefter konverterer vi den til et tal og sender den til getTaskById(id) fra TaskService for at hente opgaven;

• Metoden goToHomePage() navigerer tilbage til hovedsiden, hvor hele opgavelisten vises.

Ved at bruge Angular Router har vi således opsat navigation mellem komponenter og overført data ved hjælp af en URL-parameter. TaskListComponent håndterer navigationen efter opgave-ID, og TaskDetailsComponent læser ID'et fra ruten og indlæser den tilsvarende opgave.