I am facing a challenge with my parent page and router configuration that includes only two routes:
export const routes = [
{
route: [''],
name: 'empty',
moduleId: 'pages/empty/empty.html',
},
{
route: ['card/:cardId/mode/:renderMode'],
name: 'card',
moduleId: 'some-app/cards/card'
},
]The issue arises when navigating from one 'card' route to another, where only the 'activate' method is triggered instead of full lifecycle methods. This becomes problematic as custom elements on this card need their lifecycle methods to be called for data reinitialization.
To tackle this, I experimented with a temporary solution by briefly redirecting to the empty page:
this.router.navigate("");
setTimeout(() => {
this.router.navigate("/card/" + settings.id + "/mode/" + settings.renderMode)
}, 100)This makeshift approach triggers all lifecycle methods correctly, however, relying on a timeout is not ideal.
Another attempt was duplicating the card route with distinct names and routes:
{
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'
}However, switching between these duplicated routes had no effect on the lifecycle methods.
Additionally, it's worth noting that the Card page utilizes dependency injection to access references to singleton objects, which may have an impact on the issue.
I would appreciate any insights or assistance in resolving this matter!
Cheers