Angular子路由更新异常：导航时hobbyId被错误追加而非替换

出现路由异常追加的核心原因是Angular路由的相对路径计算逻辑：

• 当router.navigate配置了relativeTo参数时，会以指定激活路由的全路径节点为基准拼接路径，不会自动识别替换当前路由的路径参数。
• HobbyComponent注入的activatedRoute是匹配到user/:userId/hobby/:hobbyId层级的路由实例，此时直接传入[nextHobbyId]做相对跳转，路由系统会把当前路由最后一段的值（即原hobbyId456）作为路径前缀，直接拼接传入的新id值，最终生成不存在的user/123/hobby/456/789路径，触发路由错误。

所有修复操作均可在HobbyComponent内部完成，完全不需要跨组件传递路由变更事件：

方案1：调整相对路由的基准节点 #

把相对跳转的基准路由从当前HobbyComponent对应的路由，调整为该路由的父级（即user/:userId对应的路由节点），传入完整的hobby子路径段，保证路径拼接后可以完全替换原有的hobby路径段：

navigateToNextHobby(nextHobbyId: number) {
  this.router.navigate(
    ['hobby', nextHobbyId], 
    // 以当前组件路由的父级为拼接基准
    { relativeTo: this.activatedRoute.parent }
  );
}

拼接后生成的路径为user/当前userId/hobby/新hobbyId，完全符合预期的路由格式，不会出现路径追加的问题。

方案2：使用绝对路径拼接 #

完全绕开相对路由的计算逻辑，从当前路由快照中取出上下文参数，直接拼接完整的绝对路径做跳转，路径生成100%可控：

navigateToNextHobby(nextHobbyId: number) {
  // 从父级路由快照中取出当前的userId
  const currentUserId = this.activatedRoute.parent.snapshot.params['userId'];
  this.router.navigate(['/user', currentUserId, 'hobby', nextHobbyId]);
}

因为路由跳转时只是hobbyId参数变化，HobbyComponent的实例会被路由系统复用，不会重新触发ngOnInit生命周期，因此需要通过订阅路由参数变化的方式触发数据更新：

ngOnInit() {
  // 不管是首次进入组件、还是分页切换hobbyId，只要参数变化就自动拉取对应数据
  this.activatedRoute.params.subscribe(params => {
    const currentHobbyId = params['hobbyId'];
    this.loadHobbyDetail(currentHobbyId); // 替换为自身的接口请求逻辑
  });
}

这种方式完全由组件自身监听路由变化触发数据加载，不需要和UserComponent做任何事件通信，同时满足路由更新、数据同步的两个核心需求。

内容的提问来源于stack exchange，提问作者Present practice