Angular2：儿童路由中的多个路由器插座和路由器插座

我创建了一个包含左侧导航（包含“用户管理”，“车辆管理”和“管理”）的应用程序。Angular2：儿童路由中的多个路由器插座和路由器插座

路由去各个组件目前的工作原理如下：

/user打开用户组件
/vehicle打开车载组件
/admin打开管理员主页组分

点击“管理”，顶部菜单必须显示以控制导航到管理主页组件，用户管理组件和车辆管理组件。我能够通过配置以下途径做到这一点：

{ 
    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 必须包含链接和路由器插座。单击链接时，必须加载相应的组件。

我试着添加一个名为router-outlet并在路由配置的子部分使用“outlet”属性。这不起作用。我只看到在同一插座上有多个路由器插座的例子（http://plnkr.co/edit/JsZbuR?p=preview）。 我无法在不同的模板中实现多个路由器插座。

来源

2016-12-14 Sachin Mathew

不知道是否我理解你的问题，但是从ng2.3开始，你可以从一个组件继承，或者在一个组件周围放置一个基类。 – Pascal

请尝试如下。

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

来源

2017-03-01 07:31:00 Madhavi

Angular2：儿童路由中的多个路由器插座和路由器插座

回答

相关问题