在angular6中为一个组件使用多路由

Question

我为管理员创建了一个组件 Dashboard。我在路由中传递用户名以查找用户信息。

这是我的路由:

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

我用这个 url :

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

在我的 Dashborad 组件中有一个用户菜单。

当我需要使用 Role 组件时，我需要使用这个 url :

localhost:4200/panel/dashboard/role

但它不在 Role 组件中，但是当我使用它时：

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

有效。

如何为 Dashboard 组件设置多路由？

有什么问题吗？我该如何解决这个问题？

Answer 1

对于您的路由定义，您的路径应如下所示：

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

例如：

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

如果您正在考虑将角色添加为帐户 html 上的菜单，则必须执行如下操作：

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

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

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

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

Answer 2

在路线中尝试以下：

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