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 中 Constructor/OnInit 我正在使用 :itemId 获取一些数据，它 returns 一个 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

根据我的评论，您的错误是由于您的路由是同级而不是 parents ：通过远离第一个同级路由，您正在破坏它以创建另一个同级。

对于parent路由，parent会留下来（因为它包含一个路由器出口，不会消失），而child会附加到[=15] =]，意思是 parent 不会被破坏。

angular 路由 - 在不破坏组件的情况下使用附加参数导航到同一组件

angular routing - navigate to same component with additional params without destroying the component

angular

angular-routing

angular-router

angular-routerlink