在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?bar=bar

我試過用routerLink，但是這會丟失任何原本不屬於路由器鏈路的附加參數。

我已經使用當前Router來獲取當前路徑的Instruction，但是改變Instruction的參數似乎沒有任何效果調用navigateByInstruction()時也試過。

Answer 1

爲什麼你根本就沒有做到這一點：

<a [routerLink]="['./Cmp', {limit: 10, offset: 10}]">Previous Page</a> 
<a [routerLink]="['./Cmp', {limit: 10, offset: 20}]">Next Page</a> 

Answer 2

這是很容易。比方說，我們在我們的ListComponent的方法改變了頁面，並保持所有其它參數不變（如搜索相關參數 - 不能更改的頁面，忘記我們在尋找的東西:)：

page (page) { 
    this.list.page = page; 
    this._router.navigate([this.list.route, _.assign(this._params.params, { page: page })]); 
    this.update(); // Update your list of items here 
} 

我用下劃線將一個頁面參數分配給我私有的注入RouteParams對象的現有參數映射。該地圖在導航上更新，所以我們都很好，只記得你不能直接改變它，它是不可改變的。

這是我實現的文章列表與作爲指令提供分頁分頁組件沿：

ArticleListComponent：

@Component({ 
    selector: 'articles', 
    templateUrl: './article/list/index.html', 
    directives: [PaginationComponent], 
    providers: [ArticleService] 
}) 
export class ArticleListComponent implements OnInit { 
    list: ArticleList = new ArticleList; 

    private _urlSearchParams: URLSearchParams = new URLSearchParams; 

    constructor (
     private _article: ArticleService, 
     private _router: Router, 
     private _params: RouteParams, 
     private _observable: ObservableUtilities 
    ) {} 

    update() { 
     this._observable.subscribe(this._article.retrieveRange(this.list)); 
    } 

    ngOnInit() { 
     let page = this._params.get("page"); 
     if(page) { 
      this.list.page = Number(page); 
     } 

     // check for size in cookie 'articles-per-page' 

     let title = this._params.get("title"); 
     if (title) { 
      this.list.title = title; 
     } 

     this.update(); 
    } 

    size (size: number) { 
     // set cookie 'articles-per-page' 
    } 

    page (page) { 
     this.list.page = page; 
     this._router.navigate([this.list.route, _.assign(this._params.params, { page: page })]); 
     this.update(); 
    } 

    search() { 
     this.list.page = 1; 
     let params = _.pick({ 
      title: this.list.title 
     }, _.identity); 
     this._router.navigate([this.list.route, params ]); 
    } 
} 

PaginationComponent：

import { Component, Input, Output, EventEmitter, OnInit } from 'angular2/core'; 
import { RouteParams } from 'angular2/router'; 
import _ from 'underscore'; 

import { List } from '../common/abstract'; 

@Component({ 
    selector: 'pagination', 
    templateUrl: './pagination/index.html' 
}) 
export class PaginationComponent implements OnInit { 
    @Input() list: List; 
    @Output() change = new EventEmitter<number>(); 

    pages: Array<number> = []; 

    constructor(
     private _params: RouteParams 
    ) {} 

    ngOnInit() { 
     this.pages = _.range(1, this.list.pages + 1); 
    } 

    onClick (page: number) { 
     if (page > 0 && page <= this.list.pages) { 
      this.change.emit(page); 
     } 
     return false; 
    } 

    href (page: number) { 
     return `${this.list.uri}?${_.map(_.assign(this._params.params, { page: page }), (value, param) => `${param}=${value}`).join('&')}`; 
    } 

    first (page) { 
     return page == 1 ? 1 : null; 
    } 

    last(page) { 
     return page == this.list.pages ? this.list.pages : null; 
    } 
} 

分頁模板（index.html） - 我使用bootstrap進行造型

<div> 
     <ul class="pagination"> 
      <li [class.disabled]="first(list.page)"><a (click)="onClick(list.page - 1)" [attr.href]="href(list.page - 1)">&laquo;</a></li> 

      <template ngFor let-page [ngForOf]="pages"> 
       <li *ngIf="(page >= list.page - 2 && page <= list.page + 2) || first(page) || last(page)" [ngSwitch]="(page != list.page - 2 && page != list.page + 2) || first(page) || last(page)" [class.active]="page == list.page"> 
        <a *ngSwitchWhen="true" (click)="onClick(page)" [attr.href]="href(page)">{{page}}</a> 
        <a *ngSwitchDefault (click)="onClick(page)" [attr.href]="href(page)">...</a> 
       </li> 
      </template> 

      <li [class.disabled]="last(list.page)"><a (click)="onClick(list.page + 1)" [attr.href]="href(list.page + 1)">&raquo;</a></li> 
     </ul> 
    </div> 

使用在文章列表模板：

... 
<pagination *ngIf="list.pages > 1" [(list)]="list" (change)="page($event)" class="text-center"></pagination> 
... 

在我的小項目中的文章服務請求範圍的使用範圍頭從服務器的文章。

希望對您有所幫助！

Answer 3

您可以使用查詢參數選項，而不是參數是使用像

在調用的組件調用組件

const navigationExtras: NavigationExtras = { 
    queryParams: { 'param_id': 1, 'param_ids': 2, 'list':[1,2,3] }, 
}; 
this.router.navigate(['/path'], navigationExtras); 

this.route.queryParamMap.map(params => params.get('param_id') || 
    'None').subscribe(v => console.log(v)); 
    this.route.queryParamMap.map(params => params.get('param_ids') || 
     'None').subscribe(v => console.log(v)); 
    this.route.queryParamMap.map(params => params.getAll('list') || 
      'None').subscribe(v => console.log(v)); 

Answer 4

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

然後我可以在任何組件使用此方法讓我的網站地圖服務注入：

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>