angular2 routing - Angular 2/4 subrouting, nested router-outlets -
i have angular 4 app angular material tabs, , trying use tabbed subrouting.
i have defined routes in main routing file:
... { path: 'wall', component: wallhandlercomponent, canactivate: [loggedguard], children: [ { path: '', redirectto: 'recent', outlet: 'walloutlet' }, { path: 'recent', component: recenteventscomponent, outlet: 'walloutlet' }, { path: 'ranking', component: rankinguserscomponent, outlet: 'walloutlet' } ] }, ...
i load wallhandlercomponent
in main <router-outlet>
no problem.
now, inside wall-handler.component.html
file have secondary/named <router-outlet>
:
... <nav md-tab-nav-bar> <a md-tab-link *ngfor="let link of wallnavlinks" [routerlink]="link.path" routerlinkactive #rla="routerlinkactive" [active]="rla.isactive"> {{link.label}} </a> </nav> <router-outlet name="walloutlet"></router-outlet> ...
and in wall-handler.component.ts
, define wallnavlinks
follows:
... wallnavlinks(): { label: string, path: any[] }[] { return [ { label: 'recent', path: [{ outlets: { walloutlet: 'recent' } }] }, { label: 'ranking', path: [{ outlets: { walloutlet: 'ranking' } }] } ]; } ...
however, when load /wall
, instead of loading inside secondary (walloutlet
) outlet, browser goes crazy , hangs.
what doing wrong?
Comments
Post a Comment