Du vil lære hvordan du setter opp navigasjon riktig i Angular-appen din, og hvordan du overfører data mellom komponenter ved å bruke URL-en.

Vi har allerede to ruter konfigurert:

• / — viser listen over alle oppgaver;

• /task/:id — viser detaljer for en spesifikk oppgave basert på dens ID.

Målet vårt nå er å sørge for at når brukeren klikker på en knapp inne i et oppgavekort, navigerer appen til en detaljside. TaskDetailsComponent vil deretter hente oppgavens ID fra URL-en og bruke den til å hente fullstendige data om oppgaven.

Hvordan komponenter samhandler

La oss definere hvordan denne rutingsinteraksjonen vil fungere.

Vi legger til en knapp inne i TaskComponent. Når den klikkes, vil komponenten sende ut en hendelse til forelderen (TaskListComponent). Forelderen håndterer selve navigasjonen ved å oppdatere URL-en, noe som får Angular til å laste TaskDetailsComponent for den valgte oppgaven.

Hvorfor ikke rute direkte fra TaskComponent?

Hvis vi noen gang ønsker å gjenbruke TaskComponent et annet sted (for eksempel i et modalvindu eller en annen liste), vil vi ikke at den skal være bundet til rutingslogikk. I stedet bør den bare varsle forelderen om at en navigasjonshandling er forespurt.

Denne tilnærmingen er enklere å teste og lese, holder rutingslogikken sentralisert, og sikrer at TaskComponent forblir ryddig og fokusert på sine ansvarsområder.

Implementering av TaskComponent

Hovedoppgaven til TaskComponent er å sende ut hendelser til forelderen. Vi legger til en knapp i malen som kaller navigateToTask(), som vil sende ut hendelsen.

Når brukeren klikker på info-knappen, emitterer navigateToTask()-metoden oppgave-ID-en. Denne hendelsen fanges opp av forelderen (TaskListComponent), som deretter håndterer navigasjonen ved hjelp av Angulars router.

Implementering av TaskListComponent

Denne komponenten er ansvarlig for å navigere til detaljsiden for oppgaven.

For å gjøre dette bruker vi Angulars innebygde Router-tjeneste, som lar oss programmere endre URL-en og laste inn riktig komponent basert på ruten.

Vi la til Router-tjenesten i konstruktøren. Angular leverer denne tjenesten automatisk når komponenten opprettes, så ingen ekstra oppsett er nødvendig.

Vi satte også opp en hendelseslytter for (onNavigate), som utløser metoden navigateToTask() .

Når metoden kalles (for eksempel når brukeren klikker på info-knappen), bygger den ruten /task/3, og routeren oppdaterer URL-en og laster inn TaskDetailsComponent.

Hente en oppgave etter ID i TaskDetailsComponent

Når brukeren navigerer til ruten /task/:id, laster Angular inn TaskDetailsComponent. Denne komponenten har ansvar for:

• Hente ID-en fra URL-en;

• Finne den tilhørende oppgaven ved hjelp av ID-en;

• Vise oppgavedetaljene på skjermen.

Slik fungerer det:

Forklaring:

ActivatedRoute-tjenesten lar oss få tilgang til parameterne for den gjeldende ruten.

• Vi bruker snapshot.paramMap.get('id') for å hente ut id-verdien fra URL-en;

• Deretter konverterer vi den til et tall og sender den til getTaskById(id) fra TaskService for å hente oppgaven;

• Metoden goToHomePage() navigerer tilbake til hovedsiden hvor hele oppgavelisten vises.

Ved å bruke Angular Router har vi altså satt opp navigasjon mellom komponenter og overført data ved hjelp av en URL-parameter. TaskListComponent håndterer navigasjonen etter oppgave-ID, og TaskDetailsComponent leser ID-en fra ruten og laster inn den tilhørende oppgaven.