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

时间:2018-12-17 13:33:23

标签: javascript angular typescript angular6 angular-routing

我为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组件进行多路径选择?

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

2 个答案:

答案 0 :(得分:2)

在路线中尝试以下操作:

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

答案 1 :(得分:1)

对于您拥有的路线定义,您的路径应类似于:

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