U leert hoe u navigatie binnen uw Angular-app correct instelt en hoe u 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 naar een detailpagina navigeert. 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 met elkaar communiceren

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 oudercomponent handelt de daadwerkelijke navigatie af 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 routinglogica. In plaats daarvan moet het enkel de ouder informeren dat een navigatieactie is aangevraagd.

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

Implementatie van TaskComponent

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

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

Implementatie van TaskListComponent

Deze component is verantwoordelijk voor het navigeren 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 werkt de router 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.

Dit is hoe het werkt:

Uitleg:

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

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

• Vervolgens zetten we deze om naar een getal en geven deze 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 de ID uit de route en laadt de bijbehorende taak.