Angular2: multiple socket routers and socket routers inside the baby route

Question

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

Routing to go to the appropriate components currently works as follows:

• /user custom component opens
• /vehicle Vehicle component opens
• /admin opens the main admin component

When you click Administration, you need to display the top menu to control navigation through the 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}
    ]
}

html :

<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>

Hide result

, Admin. AdminComponent -. .

- "outlet" . . - (http://plnkr.co/edit/JsZbuR?p=preview). .

Answer 1

, .

{
    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>