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

Popular posts from this blog

javascript - Clear button on addentry page doesn't work -

c# - Selenium Authentication Popup preventing driver close or quit -

tensorflow when input_data MNIST_data , zlib.error: Error -3 while decompressing: invalid block type -