Question

我创建了一个包含左侧导航的应用程序（包含“用户管理”，“车辆管理”和“管理”）。

转到相应组件的路由目前如下：

/user打开用户组件
/vehicle打开Vehicle-Component
/admin打开Admin Home-Component

点击“管理”后，必须显示顶级菜单，以控制导航到Admin-Home-Component，User-Admin-Component和Vehicle-Admin-Component。我可以通过配置以下路由来完成此操作：

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

我希望通过创建管理组件来避免重复。此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>

Angular2：多个路由器插座＆amp;儿童路线内的路由器插座

1 个答案: