Du vil lære, 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 gøre det sådan, at når brugeren klikker på en knap inde i et opgavekort, navigerer appen til en detaljeside. TaskDetailsComponent vil derefter hente opgavens ID fra URL'en og bruge det til at hente opgavens fulde data.

Hvordan komponenter interagerer

Lad os definere, hvordan denne routing-interaktion fungerer.

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 der ønskes navigation.

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 udsender begivenheden.

Når brugeren klikker på info-knappen, udsender navigateToTask()-metoden opgave-ID'et. Denne begivenhed 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.

For at gøre 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 via ID i TaskDetailsComponent

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

• At hente ID'et fra URL'en;

• At finde den tilsvarende opgave via ID'et;

• At vise opgavedetaljerne 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 værdien af id 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 via en URL-parameter. TaskListComponent håndterer navigationen efter opgave-ID, og TaskDetailsComponent læser ID'et fra ruten og indlæser den tilsvarende opgave.