一般替换 Angular 2 路由参数并导航 [英] Generically replace Angular 2 route parameter and navigate

问题描述

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

I'm building an Angular app in which most of the routes will pertain to a given project and contain a projectId. In the top navigation area will be a drop-down list of projects. When the user selects a project from the drop-down, it needs to navigate to the current route but with the projectId replaced with the new value.

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

This is very similar to Angular navigate to url by replacing an existing parameter, however their accepted answer used query parameters; this needs to work on required route parameters. Also the projectId may appear in different positions within the route, so this needs to generically be able to swap out a route parameter by name.

假设我可能有以下路线:

So hypothetically I might have the following routes:

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

那些路由是虚构的，但表明 projectId 可能出现在不同的位置，并且不会以任何特定的词开头(所以我不能例如查找名为project"的片段然后抓取下一个片段).

Those routes are fictional but demonstrate that the projectId may appear in various positions and will not be preceded by any specific word (so I cannot e.g. look for a segment named "project" then grab the next segment).

从概念上来说，我想

• 从路由器中获取当前路由和路由参数(如paramMap)、查询参数和矩阵参数的映射
• 根据需要修改这些映射中的值，即如果 paramMap 包含projectId"，则更新它.
• 将路线和地图交还给路由器以在那里导航.

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

So it seems conceptually simple, but when I look at the Router's routerState and its tree of routes (which I don't quite understand) and the Router.navigate method, I don't see how to achieve this. I don't have a problem with walking the route tree to re-build the route, so long as 1) it can be done generically without any knowledge of the app's route structure, and 2) the resulting route is identical to the original route (including query and matrix parameters) other than the change to the targeted route parameter (projectId).

推荐答案

关于这个:

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

I have the ActivatedRoute and Router injected into my service/component:

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

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

Then I made a method for changing the route matrix parameter. Parameters are the name of the matrix parameter to be replaced and the new value. I found no other way of looking up the parameter to replace other than comparing path segments with the parameters of the activated route.

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);
    });
}

最终通过调用导航到替换的路由:

Finally navigate to the replaced route by calling:

changeParam('projectId','newprojectid');

这篇关于一般替换 Angular 2 路由参数并导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！