Angular2:多个路由器插座和子路由内的路由器插座 [英] Angular2 : Multiple Router-Outlets & Router-Outlets Inside Child Route

问题描述

我创建了一个包含左导航(包含用户管理"、车辆管理"和管理")的应用程序.

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 打开用户组件
• /vehicle 打开 Vehicle-Component
• /admin 打开 Admin Home-Component

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

点击管理"后，必须显示一个顶部菜单来控制导航到 Admin-Home-Component、User-Admin-Component 和 Vehicle-Admin-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}
    ]
}

我在所有三个组件中都有导航 html:

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>

我想通过创建管理组件来避免重复.此 AdminComponent 必须包含链接和路由器出口.单击链接时，必须加载相应的组件.

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.

我尝试添加一个命名的路由器出口并在路由配置的子部分中使用出口"属性.那是行不通的.我只见过在同一个插座中有多个路由器插座的例子(http://plnkr.co/edit/JsZbuR?p=preview).我无法在不同的模板中实现多个路由器插座.

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.

推荐答案

尝试如下.

{
    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:多个路由器插座和子路由内的路由器插座的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！