using multi route for one component in angular6

Question

i create a component Dashboard for admin . i pass the username in route for find user info .

this is my routing :

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

and i using this url :

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

in my Dashborad Compoent have a menu for users .

when i need to go Role component i need to use this url :

localhost:4200/panel/dashboard/role

but it not go in the Role Component but when i using this :

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

it works .

how can i multi route for Dashboard component ?

whats the problem ? how can i solve this problem ?

Answer 1

Try below in the Route:

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