angular - Do aux routes work for the root component only? -
i'm having trouble setting auxiliary routes in child components, reason auxiliary routes work start @ root component.
here's router setup
export const routes: routerconfig = [ { path: 'test1', component: test1component }, { path: 'test2', component: test2component, outlet: 'aux'}, { path: 'shell', component: shellcomponent, children: [ { path: 'department/:id', component: departmentdetailcomponent }, { path: 'test3', component: test3component, outlet: 'aux2' } ] } ];
if navigate to
http://localhost:3000/shell/department/1(aux:test2)
then output expected, is, test2component
rendered inside appcomponent
, along shellcomponent
, departmentdetailcomponent
:
primary outlets show in blue, auxiliary outlets in red.
if, however, try navigate to
http://localhost:3000/shell/department/1(aux2:test3)
i error message:
platform-browser.umd.js:1900 exception: error: uncaught (in promise): error: cannot match routes: 'test3'
router-outlets
follows:
app.component.ts (aux: test2)
<div class="app"> <h1>app</h1> <div class="primary-outlet"> <router-outlet></router-outlet> </div> <div class="aux-outlet"> <router-outlet name="aux"></router-outlet> </div> </div>
shell.component.ts (aux2: test3)
<div class="component"> <h1>shell</h1> <div class="primary-outlet"> <router-outlet></router-outlet> </div> <div class="aux-outlet"> <router-outlet name="aux2"></router-outlet> </div> </div>
what missing?
edit: suggested arpit agarwal, navigating to
http://localhost:3000/shell/(department/1(aux2:test3))
does trick:
however, take @ url after page load. if press f5
now, i'm square one:
platform-browser.umd.js:1900 exception: error: uncaught (in promise): error: cannot match routes: 'shell'
edit 2: here's link project on github.
try using http://localhost:3000/shell/(department/1//aux2:test3)
url has format (primaryroute//secondaryroute)
parentheses tells may have sibling routes , //
sibling route separator.
aux , primary outlets considered sibling on same parent
Comments
Post a Comment