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

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -