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
}

Answer 2

For the route definition you have, your path should look like:

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

For example:

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

If you are looking into adding Role as a menu on the account html, you'd have to do something like this:

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

Use that in any elements, like in a link like:

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

user is the variable that holds user identifier, example kia@kia.com