использование нескольких маршрутов для одного компонента в angular6

Question

я создаю компонент Dashboard для администратора.Я передаю имя пользователя в маршрут для поиска информации о пользователе.

это моя маршрутизация:

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

и я использую этот URL:

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

в моем Dashborad Compoent есть меню для пользователей.

когда мне нужно перейти на Role компонент, мне нужно использовать этот URL:

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