通常替换Angular 2路由参数并导航

Question

我正在构建一个Angular应用程序,其中大多数路由将属于给定项目并包含projectId.在顶部导航区域将是项目的下拉列表.当用户从下拉列表中选择项目时,它需要导航到当前路径,但projectId将替换为新值.

这与通过替换现有参数的Angular导航到url非常相似,但是他们接受的答案使用了查询参数; 这需要处理所需的路由参数.projectId也可能出现在路径中的不同位置,因此通常需要按名称交换路由参数.

所以假设我可能有以下路线:

project/:projectId/details
dashboard/status/:projectId/:year/:month/:day
admin/projects/:projectId
admin/contacts/:projectId/settings
admin/generalSettings

这些路线是虚构的,但证明projectId可能出现在不同的位置,并且不会出现任何特定的单词(所以我不能例如寻找一个名为"project"的段然后抓住下一个段).

从概念上讲,我想

• 从路由器抓取当前路线和路线参数(如paramMap),查询参数和矩阵参数的映射
• 根据需要修改这些映射中的值,即如果paramMap包含"projectId",则更新它.
• 将路线和地图交回路由器进行导航.

所以它看起来在概念上很简单,但是当我查看路由器的routerState及其路由树(我不太了解)和Router.navigate方法时,我看不到如何实现这一点.我没有走路线树重新建立路线的问题,只要1)它可以一般地完成而不知道应用程序的路径结构,2)结果路线与原始路线相同(包括查询和矩阵参数),而不是更改目标路由参数(projectId).

Answer 1

那这个呢：

我已将 ActivatedRoute 和 Router 注入到我的服务/组件中：

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

然后我做了一个改变路由矩阵参数的方法。参数是要替换的矩阵参数的名称和新值。除了将路径段与激活路线的参数进行比较之外，我发现没有其他方法可以查找要替换的参数。

changeParam(replaceParamName: string, val: any) {
    let replacePathParamIndex;
    let replacePathParamValue;
    this.route.params
        .map((params) => replacePathParamValue = params[replaceParamName])
        .mergeMap(() => this.route.url)
        .map((urlSegment) =>
            urlSegment.map((segment, ndx) => {
                if (segment.path === replacePathParamValue) {
                    replacePathParamIndex = ndx;
                }
                return segment.path;
            })
        )
        .subscribe((pathparts: any[]) => {
            pathparts[replacePathParamIndex] = val;
            this.router.navigate(pathparts);
    });
}

最后通过调用导航到替换的路线：

changeParam('projectId','newprojectid');