Pass top level route Id to other top level routes as is they were child routes

Question

I have a projects overview as entry page.

When I click the open project button the projectId is passed to the Milesstones view. When I am in the milestones view I want to activate the Tasks view with the projectId.

This scenario would easily be possible with a milestones/tasks being child routes, but they are NOT! All 3 views belong to top level routes.

AFAIK using child routes means the components must also be children in the ui hierarchy so I can not have 3 parallel/sidebyside views.

How else can I achieve what I want?

Answer 1

Create a service and inject it into each of your three components.

Inside this service create methods setProject(projectID) and getProject(). When the user clicks on the button open, invoke this method on the service passing the selected project.

Inside the method setProject() store the selected projectID in a class variable and using a class var of type EventEmitter emit the event that carries the selected projectID as a payload.

In the constructors of two other components immediately invoke getProject() on the service and subscribe to that EventEmitter.

This way as soon as the user clicks on the Milestones or Tasks links, they'll get the project ID. Moreover, if the user selects a different project while one of the other routes is active, the new value will be available to that underlying component via subscription.