routing - Angular 2, RC5 router-outlet inside another router-outlet -
i'm trying make 1 project 1 router-outlet inside router-outlet:
it work this:
in first router-outlet have 2 views:
auth component (/login)
admin component (/admin)
then in second outlet inside admin component, own routes, render these:
dashboard (/admin)
profile (/admin/profile)
users (/admin/users)
now, in angular 2 docs, can see have implementation using modules. don't want use multiple modules (or have to?).
is there way make implementation without separating modules?
i want default component admin area, why wanted second router-outlet, example: dashboard have headercomponent, leftnavcomponent, , dashboardcompoent. profile page have these headercomponent , leftnavcomponent too, , thing change profilecomponent, have same structure. think don't need repeat every importing every different admin page. wanted have 1 main admin component, have dynamic content based on current route.
i tried , searched in internet lot, example find official angular 2 documentation. implementing multiple modules.
although modules recommended optional route navigation.
you may configure routing below without modules.
app.routing
import { routes, routermodule } '@angular/router'; import { dashboardcomponent, admincomponent, profilecomponent, userscomponent } './app.component'; const approutes: routes = [ { path: '', redirectto: '/dashboard/admin/users', pathmatch: 'full' }, { path: 'dashboard', component: dashboardcomponent, children:[ { path : 'admin', component: admincomponent, children:[ { path : 'users', component: userscomponent }, { path : 'profile', component: profilecomponent } ] } ] } ]; export const routing = routermodule.forroot(approutes);
components
import { component } '@angular/core'; @component({ selector: 'my-app', template: ` <h3 class="title">routing deep dive</h3> <hr /> <router-outlet></router-outlet> ` }) export class appcomponent { } @component({ template: ` <h3 class="title">dashboard</h3> <nav> </nav> <hr /> <router-outlet></router-outlet> ` }) export class dashboardcomponent { } @component({ template: ` <h3 class="title">admin</h3> <nav> <a routerlink="users" routerlinkactive="active" >users</a> <a routerlink="profile" routerlinkactive="active" >profile</a> </nav> <hr /> <router-outlet></router-outlet> ` }) export class admincomponent { } @component({ template: ` <h3 class="title">profile</h3> ` }) export class profilecomponent { } @component({ template: ` <h3 class="title">users</h3> <hr /> ` }) export class userscomponent { }
here plunker!!
hope helps!!
Comments
Post a Comment