Je leert hoe je navigatie correct instelt binnen je Angular-app en hoe je gegevens tussen componenten doorgeeft via de URL.

We hebben al twee routes geconfigureerd:

• / — toont de lijst van alle taken;

• /task/:id — toont details van een specifieke taak op basis van het ID.

Ons doel is nu om ervoor te zorgen dat wanneer de gebruiker op een knop in een taakkaart klikt, de app navigeert naar een detailpagina. De TaskDetailsComponent haalt vervolgens het taak-ID uit de URL en gebruikt dit om de volledige gegevens van de taak op te halen.

Hoe Componenten Interageren

Laten we definiëren hoe deze routing-interactie zal werken.

We voegen een knop toe binnen TaskComponent. Wanneer hierop wordt geklikt, zal de component een event uitsturen naar de bovenliggende component (TaskListComponent). De ouder zal de daadwerkelijke navigatie afhandelen door de URL bij te werken, wat Angular triggert om TaskDetailsComponent te laden voor de geselecteerde taak.

Waarom niet direct routen vanuit TaskComponent?

Als we TaskComponent ooit opnieuw willen gebruiken op een andere plek (bijvoorbeeld in een modal of een andere lijst), willen we niet dat deze gekoppeld is aan routing-logica. In plaats daarvan moet het simpelweg de ouder informeren dat een navigatieactie is aangevraagd.

Deze aanpak is eenvoudiger te testen en te lezen, houdt de routing-logica gecentraliseerd en zorgt ervoor dat de TaskComponent overzichtelijk blijft en zich richt op zijn eigen verantwoordelijkheden.

Implementatie van TaskComponent

De hoofdtaak van TaskComponent is het uitsturen van events naar de ouder. We voegen een knop toe aan de template die navigateToTask() aanroept, waarmee het event wordt uitgezonden.

Wanneer de gebruiker op de infoknop klikt, geeft de methode navigateToTask() het taak-ID door. Dit event wordt opgevangen door de ouder (TaskListComponent), die vervolgens de navigatie afhandelt met behulp van Angular's router.

Implementatie van TaskListComponent

Dit component is verantwoordelijk voor de navigatie naar de detailpagina van een taak.

Hiervoor gebruiken we de ingebouwde Router-service van Angular, waarmee we programmatisch de URL kunnen wijzigen en het juiste component kunnen laden op basis van de route.

We hebben de Router-service toegevoegd in de constructor. Angular levert deze service automatisch bij het aanmaken van de component, dus extra configuratie is niet nodig.

We hebben ook een event listener ingesteld voor (onNavigate), die de methode navigateToTask() activeert.

Wanneer deze methode wordt aangeroepen (bijvoorbeeld wanneer de gebruiker op de infoknop klikt), wordt de route /task/3 opgebouwd, en de router werkt de URL bij en laadt de TaskDetailsComponent.

Een taak ophalen op ID in TaskDetailsComponent

Wanneer de gebruiker navigeert naar de route /task/:id, laadt Angular de TaskDetailsComponent. Deze component is verantwoordelijk voor:

• Het ophalen van het ID uit de URL;

• Het zoeken van de bijbehorende taak op basis van het ID;

• Het tonen van de taakdetails op het scherm.

Zo werkt het:

Uitleg:

De service ActivatedRoute geeft ons toegang tot de parameters van de huidige route.

• We gebruiken snapshot.paramMap.get('id') om de waarde van id uit de URL te halen;

• Vervolgens zetten we deze om naar een getal en geven het door aan getTaskById(id) van de TaskService om de taak op te halen;

• De methode goToHomePage() navigeert terug naar de hoofdpagina waar de volledige takenlijst wordt weergegeven.

Door gebruik te maken van Angular Router hebben we dus succesvol navigatie tussen componenten opgezet en gegevens doorgegeven via een URL-parameter. De TaskListComponent verzorgt de navigatie op basis van taak-ID, en TaskDetailsComponent leest het ID uit de route en laadt de bijbehorende taak.