Angular 角度：子管线未正确更新

我有一个带有按钮的UserComponent（route user/：userId）。 单击按钮时，路线将更改为user/123/hobby/456，这将触发一个hobby组件。此组件具有带有“下一步”和“上一步”按钮的分页。单击其中一个按钮时，我需要执行以下操作：

将路线更改为新的hobbyId（从user/123/hobby/456更改为user/123/hobby/789）

更新hobby组件上的数据以显示请求的hobby

单击UserComponent上的按钮时，路线工作正常，显示HobbyComponent时没有问题。我在更新子路径时遇到问题。 如果我在HobbyComponent中添加this.route.navigate功能来更新子路由，路由将错误地更改：它不会替换路由中的hobbyId，而是添加一个新的->user/123/hobby/456/789，然后应用程序会中断，因为该路由不存在。 如何解决这个问题？我希望避免将路由更改事件传递到UserComponent中，因为这些组件没有父子关系，所以我看不到传递事件的简单方法

路线：

export const UserRoutes: Routes = [
   { path: 'user/:userId', component: UserComponent, children: [
       { path: 'hobby/:hobbyId', component: HobbyComponent},
   ]}
]

用户组件：

// button click event
openHobby() {
  this.router.navigate([this.hobbyId], {relativeTo: this.activatedRoute});
}

navigateToNextHobby(nextHobbyId) {
   this.router.navigate([nextHobbyId], {relativeTo: this.activatedRoute});
}

霍比组件：

// button click event
openHobby() {
  this.router.navigate([this.hobbyId], {relativeTo: this.activatedRoute});
}

navigateToNextHobby(nextHobbyId) {
   this.router.navigate([nextHobbyId], {relativeTo: this.activatedRoute});
}

---

您需要使用基于主路由的相对路由，而不是激活的路由：

---

因此它是相对于用户路线的。

我建立了一个简单的Stackblitz项目，演示了类似的场景。请注意，您可以在同一用户下从一个爱好导航到另一个兄弟爱好

我的路线是：

const routes: Routes = [
  {
    path: "user/:userId",
    component: UserComponent,
    children: [{ path: "hobby/:hobbyId", component: HobbyComponent }]
  }
];

<button (click)="gotoHobby(1)">Go to hobby 1</button>

  async gotoHobby(hobbyId: number): Promise<void> {
    await this.router.navigate(['hobby', hobbyId], { relativeTo: this.route })
  }

<button *ngIf="hobbyId === '1'" (click)="gotoHobby(2)">Go to hobby 2</button>
<button *ngIf="hobbyId === '2'" (click)="gotoHobby(1)">Go to hobby 1</button>

  async gotoHobby(hobbyId: number): Promise<void> {
    await this.router.navigate(["hobby", hobbyId], {
      relativeTo: this.route.parent
    });
  }

HTML:

const routes: Routes = [
  {
    path: "user/:userId",
    component: UserComponent,
    children: [{ path: "hobby/:hobbyId", component: HobbyComponent }]
  }
];

<button (click)="gotoHobby(1)">Go to hobby 1</button>

  async gotoHobby(hobbyId: number): Promise<void> {
    await this.router.navigate(['hobby', hobbyId], { relativeTo: this.route })
  }

<button *ngIf="hobbyId === '1'" (click)="gotoHobby(2)">Go to hobby 2</button>
<button *ngIf="hobbyId === '2'" (click)="gotoHobby(1)">Go to hobby 1</button>

  async gotoHobby(hobbyId: number): Promise<void> {
    await this.router.navigate(["hobby", hobbyId], {
      relativeTo: this.route.parent
    });
  }

转到爱好1

从用户到爱好代码的导航是：

const routes: Routes = [
  {
    path: "user/:userId",
    component: UserComponent,
    children: [{ path: "hobby/:hobbyId", component: HobbyComponent }]
  }
];

<button (click)="gotoHobby(1)">Go to hobby 1</button>

  async gotoHobby(hobbyId: number): Promise<void> {
    await this.router.navigate(['hobby', hobbyId], { relativeTo: this.route })
  }

<button *ngIf="hobbyId === '1'" (click)="gotoHobby(2)">Go to hobby 2</button>
<button *ngIf="hobbyId === '2'" (click)="gotoHobby(1)">Go to hobby 1</button>

  async gotoHobby(hobbyId: number): Promise<void> {
    await this.router.navigate(["hobby", hobbyId], {
      relativeTo: this.route.parent
    });
  }

异步gotoHobby（hobbyId:number）：承诺{ 等待这个.router.navigate（['hobbyId'，hobbyId]，{relativeTo:this.route}） } 从爱好到爱好的导航：

const routes: Routes = [
  {
    path: "user/:userId",
    component: UserComponent,
    children: [{ path: "hobby/:hobbyId", component: HobbyComponent }]
  }
];

<button (click)="gotoHobby(1)">Go to hobby 1</button>

  async gotoHobby(hobbyId: number): Promise<void> {
    await this.router.navigate(['hobby', hobbyId], { relativeTo: this.route })
  }

<button *ngIf="hobbyId === '1'" (click)="gotoHobby(2)">Go to hobby 2</button>
<button *ngIf="hobbyId === '2'" (click)="gotoHobby(1)">Go to hobby 1</button>

  async gotoHobby(hobbyId: number): Promise<void> {
    await this.router.navigate(["hobby", hobbyId], {
      relativeTo: this.route.parent
    });
  }

HTML:

const routes: Routes = [
  {
    path: "user/:userId",
    component: UserComponent,
    children: [{ path: "hobby/:hobbyId", component: HobbyComponent }]
  }
];

<button (click)="gotoHobby(1)">Go to hobby 1</button>

  async gotoHobby(hobbyId: number): Promise<void> {
    await this.router.navigate(['hobby', hobbyId], { relativeTo: this.route })
  }

<button *ngIf="hobbyId === '1'" (click)="gotoHobby(2)">Go to hobby 2</button>
<button *ngIf="hobbyId === '2'" (click)="gotoHobby(1)">Go to hobby 1</button>

  async gotoHobby(hobbyId: number): Promise<void> {
    await this.router.navigate(["hobby", hobbyId], {
      relativeTo: this.route.parent
    });
  }

转到爱好2
去爱好1

代码：

const routes: Routes = [
  {
    path: "user/:userId",
    component: UserComponent,
    children: [{ path: "hobby/:hobbyId", component: HobbyComponent }]
  }
];

<button (click)="gotoHobby(1)">Go to hobby 1</button>

  async gotoHobby(hobbyId: number): Promise<void> {
    await this.router.navigate(['hobby', hobbyId], { relativeTo: this.route })
  }

<button *ngIf="hobbyId === '1'" (click)="gotoHobby(2)">Go to hobby 2</button>
<button *ngIf="hobbyId === '2'" (click)="gotoHobby(1)">Go to hobby 1</button>

  async gotoHobby(hobbyId: number): Promise<void> {
    await this.router.navigate(["hobby", hobbyId], {
      relativeTo: this.route.parent
    });
  }

异步gotoHobby（hobbyId:number）：承诺{ 等待这个。路由器。导航（[“爱好”，hobbyId]{ relativeTo:this.route.parent }); }

---

Try

this.router.navigate（['..'，nextHobbyId]，{relativeTo:this.activatedRoute}）

或

this.router.navigate（['../'+nextHobbyId]，{relativeTo:this.activatedRoute}）

@Benny我认为

。

或

。/

仅用于模板相对路由。这是通过这里的

{relativeTo:This.activatedRoute}

实现的。谢谢！我不确定这条路线应该是什么。我试着这样做：navigateToNextHobby（nextHobbyId）{this.router.navigate（[nextHobbyId]，{relativeTo:this.router.url}）；}但是，我得到了一个错误“type'string'不可分配给type'ActivatedRoute'”。嘿，Benny，感谢您的回复，并在这个问题上花费了时间！我需要通过单击嗜好组件中的按钮从一个嗜好导航到另一个嗜好。在您的情况下，路由更改是从用户组件触发的，正如我在问题中所说的，这不是问题。你知道我怎样才能改变霍比组件内部的路线吗？因为你提供的导航代码不起作用，我更新了我的答案和我的项目-从一个爱好到另一个爱好添加了导航。请看一看，太棒了，非常感谢！！我的荣幸。很乐意帮忙！