angular - 在 Angular 2 中更改当前路由上的单个路由参数

Question

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

一些例子:

• 默认页面到第 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?酒吧=酒吧

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

我也尝试过使用当前的 Router 获取当前路径的 Instruction，但是更改 Instruction 的参数不会在调用 navigateByInstruction() 时似乎有任何效果。

Answer 1

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

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

服务方法如下所示:

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

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

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

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

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