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：兒童路由中的多個路由器插座和路由器插座

回答

相關問題