对angular6中的一个组件使用多路径

Question

我为admin创建组件Dashboard。我在路由中传递用户名以查找用户信息。

这是我的路线：

{path:'dashboard/:username',component:DashboardComponent,children:[
{path:'role',component:RoleComponent},

我使用这个网址：

localhost:4200/panel/dashboard/kia@kia.com

我的Dashborad组件中的

有一个供用户使用的菜单。

当我需要使用Role组件时，我需要使用以下网址：

localhost:4200/panel/dashboard/role

但是它没有进入Role组件中，但是当我使用它时：

{path:'dashboard',component:DashboardComponent,children:[

有效。

如何为Dashboard组件进行多路径选择？

出什么问题了？我该如何解决这个问题？

Answer 1

在路线中尝试以下操作：

{
   path:'dashboard/:username', component: DashboardComponent
},
{
   path:'dashboard/:username/role',component: RoleComponent
}

Answer 2

对于您拥有的路线定义，您的路径应类似于：

localhost:4200/panel/dashboard/{user}/role

例如：

localhost:4200/panel/dashboard/kia@kia.com/role

如果您要在角色html上添加“角色”作为菜单，则必须执行以下操作：

[routerLink]="['/dashboard', user , '/role']

在任何元素中使用它，例如在链接中：

<a [routerLink]="['/dashboard', user, '/role/]"> Role </a>

user是保存用户标识符的变量，例如kia@kia.com