angular - Routing from one child route to another and then back to 1st child route -
in application there scenario route 'createcontrol' route 'createform' route (which sibling of 'createcontrol'). works expected , 'createform' screen loaded. if condition met route 'createcontrol' route not working. happens when 'createform' route routed 'createcontrol'.
is there issue route sibling routed in first place? definition routes
{ path: 'projects/learningconsole', component: learningconsolecomponent, children: [ { path: 'createdocument', component: createdocumentcomponent, outlet: 'r1' }, { path: 'createform', component: createformcomponent, outlet: 'r1' }, { path: 'editform', component: editformcomponent, outlet: 'r1' }, { path: 'createcontrol', component: createcontrolcomponent, outlet: 'r1' } ] }
also note no error in console. screen remains , url doesn't change indicate r1:createcontrol expect.
below code route createcontrol screen:
this._router.navigatebyurl('/projects/learningconsole/(r1:createcontrol)');
i not think problem components able route createcontrol screen without issue.
to summarize in simpler words: consider there 3 sibling routes a,b,c. routing c works. routing b works. routing b doesn't work.
the problem exists relativity of routes. essentially, first attempt @ routing occurring outside outlet. send sibling sibling occurring inside outlet, don't need specify parent route 'projects/learningconsole'
. try instead (for sibling sibling only):
this._router.navigatebyurl('(r1:createcontrol)');
if not work, potential solution specify relativity (you have tweak this, since don't have complete picture of component):
this._router.navigatebyurl('(r1:createcontrol)', { relativeto: this.routeparams });
this alternative approach require inject activatedroute
:
constructor( private routeparams: activatedroute,
update:
there potentially third solution require less routing knowledge. however, less desirable approach. cannot speak efficacy of solution, haven't provided details on project structure. try updating routes i've placed below:
[{ path: 'projects/learningconsole', component: learningconsolecomponent }, { path: 'projects/learningconsole/createdocument', component: createdocumentcomponent, outlet: 'r1' }, { path: 'projects/learningconsole/createform', component: createformcomponent, outlet: 'r1' }, { path: 'projects/learningconsole/editform', component: editformcomponent, outlet: 'r1' }, { path: 'projects/learningconsole/createcontrol', component: createcontrolcomponent, outlet: 'r1' } ]
Comments
Post a Comment