Ändern eines einzelnen Routenparameters auf der aktuellen Route in Angular 2

Question

Ist es möglich, einen einzelnen Routenparameter in der aktuellen Route zu ändern, während alle anderen Parameter beibehalten werden? Dies wird in einer Paging-Komponente verwendet, die auf eine neue Seite umgeleitet wird, während die anderen Teile der aktuellen Route gleich bleiben.

Einige Beispiele:

• Standardseite auf Seite 2: orders?foo=foo&bar=bar>orders?foo=foo&bar=bar&page=2
• Standardseite auf Seite 2 (Kind): orders/;foo=foo;bar=bar>orders/;foo=foo;bar=bar;page=2
• Seite 2 bis 3 auf Kind und Eltern mit den Parametern : orders/;foo=foo;page=2?bar=bar>orders/;foo=foo;page=3?bar=bar

ich habe einversucht, mit, jedoch werden dadurch zusätzliche Parameter verloren, die ursprünglich nicht Teil der Router-Verbindung waren.

Ich habe auch versucht, die aktuelle Router mit einem Instruction für den Strompfad zu bekommen, aber die Parameter des Instruction Veränderung scheint keine Wirkung zu haben, wenn navigateByInstruction() Aufruf.

Answer 1

Warum Sie einfach tun dies nicht:

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

Answer 2

Es ist ganz einfach. Lassen Sie uns sagen, dass wir ein Verfahren in unserem ListComponent haben, die die Seite und hält alle anderen Parameter intakt (wie Suche bezogenen Parameter verändert - nicht die Seite wechseln und vergessen wir die Suche nach etwas :):

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 
} 

I verwendet Unterstreichen Sie, um der vorhandenen Zuordnung von Parametern aus meinem privaten, injizierten RouteParams-Objekt einen Seitenparameter zuzuweisen. Diese Karte wird aktualisiert, um zu navigieren, also sind wir alle gut, nur erinnern Sie sich, dass Sie es nicht direkt ändern können, es ist unveränderlich.

Hier ist meine Implementierung einer Liste von Artikeln zusammen mit einer Paginierung Komponente als Richtlinie verwendet Paginierung zur Verfügung zu stellen:

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

Paginierung Vorlage (index.html) - Ich benutze Bootstrap für das Styling

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

Verwendung in Artikeln Listenvorlage:

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

Der Artikel Dienst in meinem kleinen Projekt fordert eine Reihe von Artikeln aus dem Server des Range-Header verwendet wird.

Ich hoffe, Sie finden dies hilfreich!

Answer 3

können Sie Abfrageparameter Option statt Parameter verwenden, wird es wie

verwenden

in der Komponente

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

in der genannten Komponente

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

Aufruf würde ich schön, wenn die activeRoute konnte gebe einen einfachen Klon der aktuellen Route [] zurück, der vor dem Aufruf von router.navigate (nextroutearray) bearbeitet werden soll, aber ich habe diese Methode in der API nicht gefunden.

Ich zentralisierte daher die Anforderung in einen einfachen Dienst, wo ich die aktuelle ActiveRoute, + eine Reihe von Parametern für die nächste Route zu parsen. Ich glaube nicht, dass dieser Code die gesamte Komplexität der URL in einer Route abdecken wird, aber in meinem Fall verwende ich nur Parameter auf dem letzten Teil der Route, so dass es für mich funktioniert:

Die Service-Methode sieht aus wie dies:

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

Dann kann ich diese Methode in einer Komponente verwenden, um meine Sitemap Service injiziert bekommen:

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

Und in dem hTML-Code, der Link zu setNextTab Methode sieht wie folgt aus: