在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:

<li (click)="setNextTab('myTabName')">Next tab</li>

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