Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2, RC5 router-outlet inside another router-outlet

I'm trying to make one project with one router-outlet inside another router-outlet:

It will work like this:

In the first router-outlet it will have two views:

  • auth component (/login)

  • admin component (/admin)

Then in the second outlet will be inside the admin component, with its own routes, that will render these:

  • dashboard (/admin)

  • profile (/admin/profile)

  • users (/admin/users)

Now, in the Angular 2 docs, I can see they have this implementation using modules. But I don't want to use multiple modules (or I have to?).

Is there a way to make this implementation without separating modules?

I want a default component for the admin area, that is why I wanted the second router-outlet, for example: The dashboard will have the HeaderComponent, LeftNavComponent, and the DashboardCompoent. But the profile page will have all these HeaderComponent and LeftNavComponent too, and the only thing that would change is the ProfileComponent, so it will have basically the same structure. I think I don't need to repeat every importing for every different admin page. I wanted to have just one main admin component, that will have a dynamic content based on the current route.

I already tried and searched in the internet a lot, but the only example I could find is from the official Angular 2 documentation. But they are implementing this with multiple modules.

like image 883
Thiago Yoithi Avatar asked Aug 24 '16 01:08

Thiago Yoithi


People also ask

Is it possible to use multiple router outlet?

You can have multiple router-outlet in same template by configuring your router and providing name to your router-outlet, you can achieve this as follows.

Can we define multiple router outlets in a component view?

Yes! We can use multiple router-outlets in same template by configuring our routers and simply add the router-outlet name. You can see in the example.


2 Answers

Although Modules are recommended they are optional for any route navigation.

You may configure routing like below without any modules.

app.routing

import { Routes, RouterModule }   from '@angular/router';        import { DashboardComponent,           AdminComponent,          ProfileComponent,          UsersComponent       } from './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 }          from '@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 is the Plunker!!

like image 121
Madhu Ranjan Avatar answered Sep 22 '22 23:09

Madhu Ranjan


Adding a solution with lazy loaded modules. This is a generic answer according to title and not to the body of the original question.

I created a separate module named UserCheckinModule for non-logged user containing Login and Signup pages/components as they usually share common design and functions/services.

Routes defined in app.routing.module.ts -

const routes: Routes = [   { path: 'user', loadChildren: './user-checkin/user-checkin.module#UserCheckinModule' },   { path: '**', redirectTo: 'user' } ]; 

Routes defined in user-checkin-routing.module.ts for UserCheckin module -

const routes: Routes = [   {     path: '',     component: CheckinComponent, // base template component     children: [       { path: '', redirectTo: 'login' },       { path: 'login', component: LoginComponent },       { path: 'signup', component: SignupComponent },       { path: '**', redirectTo: 'login' }     ]   } ]; 

Use forChild() in imports of user-checkin-routing.module.ts as

RouterModule.forChild(routes) 

After this you will have to export your UserCheckinRoutingModule in UsercheckinModule. The app.component.html already contains a router-outlet and behaves as the base template/layout for the whole app. The UserCheckinModule is a child module and has its own routes and base template.

Content of checkin.component.html base template -

<router-outlet></router-outlet>  
like image 43
Sujit Kumar Singh Avatar answered Sep 23 '22 23:09

Sujit Kumar Singh