CODEWITHSUNDEEP
aurelia
Rich Barber
Rich Barber

Reputation: 465

Setting title for multiple instances of a parameterised route page

I define a route config as:

{ route: 'page/:id', name: 'page', moduleId: 'page', title: "Page #" }

I've also got another component listening to the router:navigation:complete event (EventAggregator), and, when a different fragment is spotted, it adds it to an array and displays this on the screen (as a sort of History list) using NavigationInstruction.config.navModel.title

When I navigate to the 'page' component with different ids time, e.g. #/page/1, #/page/2, #/page/3. I call NavigationInstruction.config.navModel.setTitle("Page " + id) from the activate() method.

In my history, I initially will see:

"Page 1"`

... then when navigating to #/page/2...

"Page 2"
"Page 2"

... then when navigating to #/page/3...

"Page 3"
"Page 3"
"Page 3"

Because the RouteConfig is shared between the different NavigationInstructions, changing the navModel.title value affects ALL NavigationInstructions derived from that RouteConfig.

Anyone got any ideas how I can set a custom title for each instance of the Page component? Is Aurelia expected to deal ok with multiple simultaneous instances of the same component?

I've considered using the new router.transformTitle hook, but as I'm likely to eventually include more information in the title, e.g. "Page 1: Contents", "Page 2: The First Chapter", that feels sub-optimal and likely to leave me doing a lot of rolling-my-own architecture to dynamically resolve the string.

Upvotes: 1

Views: 138

Answers (2)

Rich Barber
Rich Barber

Reputation: 465

From looking at the code, and responses (thanks @Ashley Grant), it appears that my expectations of NavigationInstruction were not accurate.

A NavigationInstruction represents a single workflow of triggering, navigation, deactivating previous pages, and activating new pages, and firing any events triggered as part of that process.

It does not - as I'd thought - represent a 'instance' of a RouteConfig (i.e. the fragment, plus params). Therefore, referring to a NavigationInstruction after the navigation:router:complete event has fired is not intended, therefore doesn't work!

I'll now rewrite my code to take a copy of the title when the navigation:router:complete event fires (this is actually non-trivial, requires calling the _buildTitle() private method on the instruction) - and have a raised a FR - https://github.com/aurelia/router/issues/469 - to request that this operation be made less opaque.

Upvotes: 0

Ashley Grant
Ashley Grant

Reputation: 10887

I created a very simple app to test this. I did use a slightly different strategy though. I used the activate callback on the page viewmodel instead of subscribing to the router:navigation:complete event. Here's my code:

export class Page {
  activate(params, route, instruction) {
    this.pageNumber = parseInt( params.id || '1' );
    instruction.config.navModel.setTitle("Page " + this.pageNumber)
  }
}

I'm not seeing the behavior you are seeing:

History Screenshot

What version of the framework module are you working with?

Upvotes: 1

Related Questions