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

在我的评论之后，您的错误是由于您的路线是同级而不是父级：通过远离第一个同级路由，您正在销毁它以创建另一个同级。

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

角度路由-使用其他参数导航到相同的组件而不会破坏该组件

2 个答案: