CODEWITHSUNDEEP
javascripttypescriptaurelia
Sebastiaan
Sebastiaan

Reputation: 11

Force Aurelia to call lifecycle methods of new route with same component but different route parameters

I have a parent page with a router, that is set up with only 2 routes:

export const routes = [
  {
    route: [''],
    name: 'empty',
    moduleId: 'pages/empty/empty.html',
  },
  {
    route: ['card/:cardId/mode/:renderMode'],
    name: 'card',
    moduleId: 'some-app/cards/card'
  },
]

Now, the first time the 'card' route is used, all the lifecycle methods are called: constructor, created, attached, bind, activate, etc.

When I navigate from one 'card' to another, only 'activate' is called. My problem is, that this card contains custom elements, whose lifecycle methods are not called in this case, and I need to reinitialize their data.

To test a hack, I tried making a short stop at my empty page:

this.router.navigate("");
setTimeout(() => {
  this.router.navigate("/card/" + settings.id + "/mode/" + settings.renderMode)
}, 100)

This results in all the lifecycle methods to be called just fine, but I don't want to rely on some timeout of course...

I also tried to duplicate my card route with different name and route:

  { 
    route: ['card/:cardId/mode/:renderMode/1'],
    name: 'card-1',
    moduleId: 'e-course-app/cards/card'
  },
  { 
    route: ['card/:cardId/mode/:renderMode/2'],
    name: 'card-2',
    moduleId: 'e-course-app/cards/card'
  }

And then iterating between them, but this has no effect.

Finally, I should mention that the Card page uses injection to obtain some references to singleton objects, don't know if this matters.

I would greatly appreciate any help!

Cheers

Upvotes: 0

Views: 661

Answers (1)

Sebastiaan
Sebastiaan

Reputation: 11

I found the answer; the routes activation strategy is used to determine how the page initialization should be handled. You can even changed the default strategy for all pages, as described here: stackoverflow.com/questions/39999969/how-to-set-default-activationstrategy-in-aurelia

Upvotes: 1

Related Questions