Angular2：子路由内的多个路由器插座和路由器插座-Java 学习之路

我创建了一个包含 left-navigation （包含"User Management"，"Vehicle Management"和"Administration"）的应用程序 .

转到相应组件的路由目前的工作原理如下：

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

单击"Administration"时，必须显示 top-menu 以控制导航到Admin-Home-Component，User-Admin-Component和Vehicle-Admin-Component . 我可以通过配置以下路由来完成此操作：

{
    path: 'admin',
    children:[
        { path: '', component: AdminHomeComponent},
        { path: 'users', component: UserAdminComponent},
        { path: 'cache', component: VehicleAdminComponent}
    ]
}

我在 all three components: 里面有导航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） . I am unable to implement multiple router-outlets in different templates .

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>

回复于 2024-05-01T21:52:59+08:00

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

1 回答

相关问题