Question

我有这样的路由配置：

[
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      {
        path: 'child-one',
        component: ChildOneComponent
      },
      {
        path: 'child-two',
        component: ChildTwoComponent
      }
    ]
  }
]

在ParentComponent内，我有一个按钮，当单击该按钮时，应将查询参数添加到当前路由/ URL。我找到了其他建议解决方案的答案：

// inside ParentComponent
constructor(
  private router: Router,
  private route: ActivatedRoute
) { }

onButtonClick() {
  this.router.navigate([], {
    relativeTo: this.route,
    queryParams: { myparam: true },
    queryParamsHandling: 'merge',
  })
}

但是，在ParentComponent中使用此解决方案会使导航相对于父路径而不是子路径。因此，例如，如果用户位于URL /parent/child-one并单击按钮，则浏览器将导航到/parent?myparam=true而不是/parent/child-one?myparam=true。

由于此代码在我的应用程序的顶部组件中运行，因此，我宁愿不要遍历ActivatedRoute对象来寻找传递给relativeTo参数的适当路径的麻烦工作，因为可能会出现很多极端情况。

Router对象确实在其url属性中提供了完整的当前URL，但是，像这样使用该URL不会触发导航事件：

onButtonClick() {
  this.router.navigate([this.router.url], {
    queryParams: { myparam: true },
    queryParamsHandling: 'merge',
  })
}

用this.router.navigateByUrl尝试相同的操作也不会触发导航事件：

onButtonClick() {
  this.router.navigateByUrl(this.router.url, {
    queryParams: { myparam: true },
    queryParamsHandling: 'merge',
  })
}

将replaceUrl: true添加到NavigationExtras对象（navigateByUrl的第二个参数）也不会导致导航事件。

Answer 1

好的，经过大量的实验，我提出了以下解决方案：

onButtonClick() {
  const urlTree = this.router.parseUrl(this.router.url)
  urlTree.queryParams['myparam'] = 'true'
  this.router.navigateByUrl(urlTree)
}

在做一个简化的示例时，我无法重现问题，因此我在项目中碰到了一个极端情况，即我无法完全跟踪。

在深入研究navigateByUrl的源代码之后，似乎会比较当前URL和新URL，如果确定它们相同，则会跳过导航事件。但是，在此比较中似乎未考虑NavigationExtras参数，如果要更改查询字符串参数，显然很重要。上面概述的解决方案消除了此缺陷，因为查询参数已集成到navigateByUrl的第一个参数中，该参数用于确定新URL是否与旧URL相匹配。（请参见源代码here。）

Answer 2

在“ app-routing.module.ts”文件中，添加以下代码：


    @NgModule({
      imports: [RouterModule.forRoot(routes, {
        paramsInheritanceStrategy: 'always'
      })],
      exports: [RouterModule]
    })

从Angular中的父路径组件向当前子路径添加查询参数

2 个答案: