在 Angular 2 中更改当前路线上的单个路线参数 [英] Change a single route parameter on the current route in Angular 2

问题描述

是否可以更改当前路由中的单个路由参数，同时保留所有其他参数?这用于分页组件，它将路由到新页面，同时保持当前路由的其他部分相同.

Is it possible to change a single route parameter in the current route, while keeping all the other parameters? This is for use in a paging component, which will route to a new page while keeping the other parts of the current route the same.

一些例子:

• 默认页面到第 2 页:orders?foo=foo&bar=bar > orders?foo=foo&bar=bar&page=2
• 默认页面到第 2 页(子页面):orders/;foo=foo;bar=bar > orders/;foo=foo;bar=bar;page=2
• 带有参数的子级和父级的第 2 到 3 页:orders/;foo=foo;page=2?bar=bar > orders/;foo=foo;page=3?bar=bar

• Default page to page 2: orders?foo=foo&bar=bar > orders?foo=foo&bar=bar&page=2
• Default page to page 2 (child): orders/;foo=foo;bar=bar > orders/;foo=foo;bar=bar;page=2
• Page 2 to 3 on child and parent with parameters: orders/;foo=foo;page=2?bar=bar > orders/;foo=foo;page=3?bar=bar

我曾尝试使用 routerLink，但是这会丢失最初不属于路由器链接的任何其他参数.

I have tried using a routerLink, however this loses any additional parameters that are not originally part of the router link.

我也尝试使用当前的 Router 来获取当前路径的 Instruction，但是更改 Instruction 的参数并没有调用 navigateByInstruction() 时似乎有任何效果.

I have also tried using the current Router to get an Instruction for the current path, however changing the parameters of the Instruction does not seem to have any effect when calling navigateByInstruction().

推荐答案

如果 activeRoute 可以在调用 router.navigate(nextroutearray) 之前返回要操作的当前路由 [] 的简单克隆，我会很好，但是我在api中没有找到这样的方法.

I would be nice if the activeRoute could return a simple clone of the current route [] to be manipulated before call to router.navigate(nextroutearray), but i did not find such method in the api.

因此我将需求集中到一个简单的服务中，我可以在其中解析当前的 activeRoute，+ 一组用于下一个路由的参数.我不认为这段代码会涵盖路由中 url 的所有复杂性，但就我而言，我只在路由的最后一部分使用参数，所以它对我有用:

I therefore centralized the requirement into a simple service, where i can parse the current activeRoute, + a set of parameters to be used for the next route. I do not think this code will cover all the complexity of the url in a route, but in my case, I only use parameters on the last part of the route, so it works for me:

服务方法如下所示:

routeFor(activeRoute: ActivatedRoute, params: any): any[] {
    let result = [];
    result.push('/');
    for (var i = 0; i < activeRoute.pathFromRoot.length; i++) {
        activeRoute.pathFromRoot[i].snapshot.url.forEach(r => result.push(r.path));
    }

    let currentParams = activeRoute.pathFromRoot[activeRoute.pathFromRoot.length - 1].snapshot.url[0].parameters;
    for (var n in currentParams) {
        if (currentParams.hasOwnProperty(n) && !params.hasOwnProperty(n)) {
            params[n] = currentParams[n];
        }
    }

    result.push(params);
    return result;
}

然后我可以在任何注入我的站点地图服务的组件中使用此方法:

Then i can use this method in any component getting my sitemap service injected:

setNextTab(tab: string) {
    let nextUrl = this.sitemapService.routeFor(this.activatedRoute, { pagetab: tab });
    this.router.navigate(nextUrl);
}

在 html 中，指向 setNextTab 方法的链接如下所示:

And in the html, the link to setNextTab method looks like this:

下一个标签

这篇关于在 Angular 2 中更改当前路线上的单个路线参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！