Question

在子路由中将参数发送到URL时出现问题。详细信息如下：

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

var n = 10 // Declaring number of rows

for (var i = 1; i <= n; i++) {
  var row = ''; //declaring text variable for current row 
  
  for (var x = n - i; x >= 1; x--) {
    row += '  '; //adding spaces in begining of the row
  }
  
  for (var j = 1; j <= i; j++) {
    row += ' ' + j; // numbers which increase up to middle
  }
  
  for (var k = i - 1; k >= 1; k--) {
    row += ' ' + k; // adding rest of the numbers to the row
  }
  
  console.log(row); //displaying whole row
}

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

我在这里做错了什么？

Answer 1

您可以从根目录使用绝对路径。

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

Answer 2

您的代码应更改为

[routerLink]="[user.Id, 'userdetailsview']"

对此

[routerLink]="['/user.Id','userdetailsview']"

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

2 个答案: