在不更改活动路由的情况下更改 Angular 2 中的 URL 路径参数答案

【问题标题】：Change URL Path Parameter in Angular 2 Without Changing Active Route在不更改活动路由的情况下更改 Angular 2 中的 URL 路径参数
【发布时间】：2017-04-14 23:55:35
【问题描述】：

我正在尝试找出一种方法来更新我的 URL 中的路径参数而不更改当前活动的路由。例如，假设我有以下路线：

{
    path: 'pages/:pageId',
    component: PageComponent,
    children: [
    {
        path: 'sections/:sectionId',
        component: PageSectionComponent,
        children: [
        {
            path: 'details',
            component: PageSectionDetailsComponent
        }]
    }]
}

我要解决的问题是，当有人更改 :pageId 时，我想在更改 URL 时保持他们的活动路由。因此，如果他们将:pageId 从 999 更改为 777，他们的路线应该从：

pages/999/sections/123/details   =>   pages/777/sections/123/details
pages/999/sections/123           =>   pages/777/sections/123

此外，我需要为:sectionId 完成这项工作。例如，从:sectionId 123 导航到 456：

pages/999/sections/123/details   =>   pages/999/sections/456/details
pages/999/sections/123           =>   pages/999/sections/456

我的项目中有几个子路由被我省略了，所以绝对链接很难维护。我希望我能以某种方式使用当前的ActivatedRoute，更改我正在更新的单个参数，然后使用Router 导航到该路线。

非常感谢任何帮助！

附加信息：

我正在使用 Angular 4.0.0

有一个类似的问题解决了我要解决的核心问题，但它已经过时了：Change a single route parameter on the current route in Angular 2

【问题讨论】：

标签： angular url-routing

【解决方案1】：

您可以在代码或 HTML 中更新到新的必需参数...在您的应用程序中最有意义。

在 HTML 中，您可以使用 routerLink 指令：

<a [routerLink]="['/products', product.id]">{{product.productName}}</a>

或者使用这样的代码：

this.router.navigate(['/products', this.product.id]);

或者用你的例子：

this.router.navigate(['/pages', this.pageId, '/sections', this.sectionId]);

（我想我第一次误解了这个问题。）

【讨论】：

我认为这不适用于我的所有子路线。例如，如果我做this.router.navigate(['/pages', pageId, '/sections', sectionId])，那么/pages/999/sections/123/details 将转到/pages/777/sections/123 而不是/pages/777/sections/123/details。我遇到的问题是如何保持整个活动路线，而无需对我的位置更改进行硬编码。
路由是如何激活的？是否可以在某处发布您的代码或提供一个 plunker？
您也可以考虑使用查询参数而不是必需参数。这意味着从路由配置中删除 Id，并将其作为一组查询参数传递，该参数是具有两个 id 的对象。
类似这样的东西：pages/sections/details?page=999&section=123
那么你可以只更新查询参数而不影响主路由路径。