Angular2：子路由内的多个路由器插座和路由器插座答案

【问题标题】：Angular2 : Multiple Router-Outlets & Router-Outlets Inside Child RouteAngular2：子路由内的多个路由器插座和路由器插座
【发布时间】：2017-04-29 22:23:42
【问题描述】：

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

到各个组件的路由当前工作如下：

/user 打开用户组件
/vehicle 打开 Vehicle-Component
/admin 打开管理主页组件

点击“管理”时，必须显示一个顶部菜单来控制导航到 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 必须包含链接和路由器插座。单击链接时，必须加载相应的组件。

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

【问题讨论】：

不确定我是否理解您的问题，但从 ng2.3 开始，您可以从组件继承或在组件周围放置基类。
多个路由器出口在哪里？？？

标签： angular routing angular-ui-router angular2-routing

【解决方案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>

【讨论】：