Domanda Modifica un singolo parametro di rotta sulla rotta corrente in Angular 2


È possibile modificare un singolo parametro del percorso nel percorso corrente, mantenendo tutti gli altri parametri? Questo è per l'uso in un componente di paging, che si dirigerà verso una nuova pagina mantenendo le altre parti del percorso corrente lo stesso.

Qualche esempio:

  • Pagina predefinita a pagina 2: orders?foo=foo&bar=bar > orders?foo=foo&bar=bar&page=2
  • Pagina predefinita a pagina 2 (figlio): orders/;foo=foo;bar=bar > orders/;foo=foo;bar=bar;page=2
  • Pagina 2 a 3 su figlio e genitore con parametri: orders/;foo=foo;page=2?bar=bar > orders/;foo=foo;page=3?bar=bar

Ho provato a usare a routerLink, tuttavia questo perde tutti i parametri aggiuntivi che non sono originariamente parte del collegamento del router.

Ho anche provato a usare la corrente Router ottenere un Instruction per il percorso corrente, ma cambiando i parametri del Instruction non sembra avere alcun effetto quando si chiama navigateByInstruction().


22
2018-01-29 12:05


origine


risposte:


puoi usare l'opzione parametro query invece del parametro che usa come

nel chiamare il componente

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

nel componente chiamato

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

2
2017-09-01 11:19



Sarebbe bello se l'activeRoute potesse restituire un semplice clone del percorso corrente [] da manipolare prima di chiamare a router.navigate (nextroutearray), ma non ho trovato tale metodo nell'API.

Pertanto ho centralizzato il requisito in un servizio semplice, in cui è possibile analizzare l'attuale Runae attiva, + un insieme di parametri da utilizzare per il prossimo percorso. Non penso che questo codice copra tutta la complessità dell'URL in un percorso, ma nel mio caso, utilizzo solo i parametri sull'ultima parte del percorso, quindi funziona per me:

Il metodo di servizio è simile al seguente:

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

Quindi posso utilizzare questo metodo in qualsiasi componente per l'iniezione del servizio Sitemap:

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

E nel codice HTML, il collegamento al metodo setNextTab è simile al seguente:

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


1
2017-12-17 09:46



Perché semplicemente non lo fai:

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

0
2018-01-29 12:45



È abbastanza facile Diciamo che abbiamo un metodo nel nostro ListComponent che cambia la pagina e mantiene intatti tutti gli altri parametri (come i parametri relativi alla ricerca - non possono cambiare la pagina e dimentichiamo che stavamo cercando qualcosa :):

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
}

Ho usato Underscore per assegnare un parametro di pagina alla mappa esistente di parametri dal mio oggetto RouteParams privato, iniettato. Quella mappa viene aggiornata durante la navigazione, quindi stiamo tutti bene, ma ricorda che non puoi cambiarlo direttamente, è imutibile.

Ecco la mia implementazione di un elenco di articoli insieme a un componente di impaginazione usato come direttiva per fornire l'impaginazione:

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

Modello di impaginazione (index.html): utilizzo il bootstrap per lo 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>

Utilizzo nel modello di elenco articoli:

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

Il servizio articolo nel mio piccolo progetto richiede una serie di articoli dal server usando l'intestazione Range.

Spero che ti sia d'aiuto!


0
2018-05-22 16:44