Angular 7 - Problem with parameters on the Router Link

Question

I have a problem sending a parameter to a URL on child routing. Here are the details:

I have a list of users with an Id and when I click on a user I need to send that Id as a parameter to the Url, Here's the userlist:

<div class="bx--grid" style="height: 100%" style="padding-left: 0%">
          <div class="bx--structured-list bx--col-lg-12">
              <div class="bx--structured-list-tbody">
                      <div class="bx--structured-list-row" *ngFor="let user of users">
                          <div class="bx--structured-list-td">
                          <a class="nav-link"
                          [routerLinkActive]="['active']"
                          [routerLink]="[user.Id, 'userdetailsview']"> {{user.UserName}}
                       </a>
                      </div>
                  </div>
            </div>
      </div>

Here's my approuting:

const routes: Routes = [

    //no parameter, so it's not an edit or a view.
    path: "users-manager", component: UserManagerComponent,
    children: [
      { path: "", redirectTo: "landing", pathMatch: "full" },
      { path: "landing", component: LandingBodyComponent },
      //{ path: "new", component: TO_BE_CREATEDComponent }, //This should open the wizard for new user

      { path: "tracks", component: ArtistTrackListComponent },
      { path: "albums", component: ArtistAlbumListComponent },
      { path: "userdetailsview", component: LandingBodyComponent }
    ]
  },
  {
    //recieves the user id in the url to view or edit his/her profiles.
    path: "users-manager/:userId",
    component: UserManagerComponent,
    children: [
      { path: "", redirectTo: "tracks", pathMatch: "full" },
      { path: "tracks", component: ArtistTrackListComponent },
      { path: "albums", component: ArtistAlbumListComponent },
      { path: "userdetailsview", component: LandingBodyComponent }
    ]
  },

My problem is that when I click a user it goes to the right path like:

http://localhost:4200/#/users-manager/9/userdetailsview

but when I click another user it goes to:

http://localhost:4200/#/users-manager/9/11/userdetailsview

I need to replace the new Id 11 in this case with the old one 9

What I'm doing wrong here?

Answer 1

You can use an absolute path from root.

routerLink="/users-manager/{{user.Id}}/userdetailsview"