對angular6中的一個組件使用多路徑

Question

我為admin創建一個組件Dashboard 。 我在路由中傳遞用戶名以查找用戶信息。

這是我的路線：

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

我使用這個網址：

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

在我的Dashborad Compoent中，有一個用戶菜單。

當我需要使用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