Angular2 : Multiple Router-Outlets & Router-Outlet

Question

I have created an application containing a left-navigation (containing "User Management", "Vehicle Management" and "Administration").

The routing to go to the respective Components currently works as follows:

• /user opens the User-Component
• /vehicle opens the Vehicle-Component
• /admin opens the Admin Home-Component

On clicking "Administration", a top-menu must be displayed to control navigation to Admin-Home-Component, User-Admin-Component and Vehicle-Admin-Component. I was able to do this by configuring the following routes:

{
    path: 'admin',
    children:[
        { path: '', component: AdminHomeComponent},
        { path: 'users', component: UserAdminComponent},
        { path: 'cache', component: VehicleAdminComponent}
    ]
}

I had the navigation html inside all three components:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs nav-justified">
   <li><a [routerLink]="/view/admin">Admin Home</a></li>
   <li><a [routerLink]="['/view/admin/users']">User Admin</a></li>
   <li><a [routerLink]="['/view/admin/vehicles']" >Vehicle Admin</a></li>
</ul>

I want to avoid duplication of this by creating a Admin Component. This AdminComponent must contain the links and a router-outlet. On clicking on the links, the corresponding Component must be loaded.

I tried adding a named router-outlet and using "outlet" property in the children part of route configuration. That is not working. I have only seen examples with multiple router-outlets in the same outlet (http://plnkr.co/edit/JsZbuR?p=preview). I am unable to implement multiple router-outlets in different templates.

Answer 1

Try like below.

{
    path: 'view/admin',
    children:[
        { path: '', component: AdminHomeComponent},
        { path: 'users', component: UserAdminComponent},
        { path: 'vehicles', component: VehicleAdminComponent}
    ]
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs nav-justified">
   <li><a [routerLink]="/view/admin">Admin Home</a></li>
   <li><a [routerLink]="/view/admin/users">User Admin</a></li>
   <li><a [routerLink]="/view/admin/vehicles" >Vehicle Admin</a></li>
</ul>