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

【问题标题】：angular routing - navigate to same component with additional params without destroying the component角度路由 - 使用附加参数导航到同一个组件而不破坏组件
【发布时间】：2018-11-21 10:56:42
【问题描述】：

我有这样的路由设置

{
    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

【问题讨论】：

'list/:itemId/:subNavItemId' 应该是 'list/:itemId' 的子级：因此，您的路由会创建同一个类的两个实例，但必须销毁它们才能路由到 URL。让它成为第一个路由的子节点，那么你的组件就不应该被销毁了。
谢谢，我就是这么做的，如果你回复我可以检查一下

标签： angular angular-routing angular-router angular-routerlink

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

    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,
       //  }
    ]
}

【讨论】：

这并没有回答问题，而是为问题提供了解决方法。