angular - 角度路由 - 使用附加参数导航到同一个组件而不破坏组件

Question

我有这样的路由设置

{
    path: '',
    component: BaseCmp,
    children: [
        { path: 'list', component: ListCmp },
        {
            path: 'list/:itemId',
            component: ListItemCmp,
        },
        {
            path: 'list/:itemId/:subNavItemId',
            component: ListItemCmp,
        }
    ]
}

我正在从 ListCmp 中选择一个项目并导航到例如“list/123”

在 ListCmp 构造函数/OnInit 中，我使用 :itemId 获取一些数据，它返回一个 SubNavItems 列表，其中第一个 SubNavItem 的 id 应作为参数添加（用于 routerLinkActive 突出显示和其他获取目的）。

constructor(route:ActivatedRoute, http:HttpClient, router:Router){
   let id = route.params.itemId
   http.get(.../id).subscribe(list => {
        // add id of first item of list to params
        this.router.navigate(['list', id, list[0].id, {replaceUrl:true}]
   })
} 

这将导致当前 ListItemCmp 的破坏并实例化一个新的 ListItemCmp。我怎样才能防止这种情况？我已经尝试了 location.go() 方法，但这不会触发 routerLinkActive

Answer 1

您可以使用查询参数而不是硬路由

    constructor(route: ActivatedRoute) {
    let id = route.params.itemId
    http.get(.../id).subscribe(list => {
        // add id of first item of list to params
        this.router.navigate(['list', id], { queryParams: { subNavItemId: list[0].id } })
    })
    this.activatedRoute.queryParamMap.subscribe(query => {
      if (query['params']['subNavItemId']) {
        // perform some action
      }
    });
  }

在您的路由器中，您现在可以删除“list/:itemId/:subNavItemId”

{
    path: '',
    component: BaseCmp,
    children: [
        { path: 'list', component: ListCmp },
        {
            path: 'list/:itemId',
            component: ListItemCmp,
        },
        // you can remove below route
// {
         //    path: 'list/:itemId/:subNavItemId',
         //    component: ListItemCmp,
       //  }
    ]
}

Answer 2

根据我的评论，您的错误来自这样一个事实，即您的路线是兄弟姐妹而不是父母：通过远离第一个兄弟姐妹，您正在破坏它以创建另一个兄弟姐妹。

使用父路由，父路由将保留（因为它包含路由器出口并且不会消失），而子路由将附加到父路由，这意味着父路由不会被破坏。