Angular 7 - 路由器链接上的参数问题

Question

我在向子路由上的 URL 发送参数时遇到问题。以下是详细信息：

我有一个带有 Id 的用户列表，当我点击一个用户时，我需要将该 Id 作为参数发送到 Url，这是用户列表：

<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>

这是我的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 }
    ]
  },

我的问题是，当我点击用户时，它会转到正确的路径，例如：

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

但是当我点击另一个用户时，它会转到：

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

在这种情况下，我需要将新的 ID 11 替换为旧的 9

我在这里做错了什么？

Answer 1

您可以使用来自根目录的绝对路径。

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