Search code examples
typescript2.0aurelia

Clarity needed: subscribing to router events Aurelia (Typescript)

I am attempting to change the title tag of a page dynamically based on the params of the provided URL. I am doing this by subscribing to the "router:navigation:success" (or "complete") event for the Aurelia router.

This works fine should the page life cycle be completed from start to finish, however, when the URL is changed on the same page (using this.router.navigateToRoute) it was on before, the events I subscribed to does not fire and thus the title tag does not get changed.

For example:

  1. I navigate to /needs/volunteer. The title reads All Volunteering Opportunities
  2. On this page, a selection in a set of dropdowns gets made and using this.router.navigateToRoute the url is changed to /needs/volunteer/city-abc. The title tag still reads All Volunteering Opportunities as the event I subscribed to did not fire.
  3. Should I hit enter on the URL bar with the URL pointing to /needs/volunteer/city-abc, the title tag will read Volunteering Opportunities in City ABC. This is what I expected to happen.

Is there a way to subscribe to an event which points to this.router.navigateToRoute?

The reason for having the above mentioned functionality as we have it at the moment is that when we load the page with URL params, we will automatically set the associated dropdown to the selected value. This also allows people to share the URL and thus the page content.

Thanks in advance for any help.

Edit:

I noticed that for this.router.navigateToRoute the option for trigger: false/true exist. I it is currently set to false and then the router displays the functionality as discribed above.

If I set trigger: true, I get the desired effect, however I notice a complete page reload happens at that point.

I obviously don't want this to happen, so I am still looking at how to subscribe to an event related to this.router.navigateToRoute.

Solution

  • Simple answer to the solution was to emit/publish the router:navigation:complete event after having completed the this.router.navigateToRoute method.