Jak zaktualizować parametry macierzy w Angular2

Question

W Angular2, czy istnieje sposób na aktualizację parametru macierzy, ale przejdź do tego samego komponentu? Zasadniczo chciałbym łatwo przechodzić z adresu URL, który wygląda tak:

/search;term=paris;pageSize=24;currentPage=1;someFilter=value;

do tego samego, ale z currentPage aktualizowane na paginacji:

/search;term=paris;pageSize=24;currentPage=2;someFilter=value;

wykorzystaniem router.navigate nie pojawił się być najlepszą opcją, ponieważ musiałbym napisać dużo mojej własnej logiki, aby ponownie zbudować adres URL do wykorzystania przez navigate (ponownie konstruując coś, co już istnieje).

Dla kopnięć i chichotów, próbowałam

this._router.navigate([this._router.url, {currentPage: this.pagination.currentPage}]);

ale (jak można się spodziewać), router jest niemy na fakt, że istnieją parametry matrycy na aktualny adres URL, więc wynik jest nie ładne.

EDIT: Należy również wspomnieć, że nie może być dowolna liczba dodatkowych par klucz/wartość parametrów macierzy, więc ciężko kodowania żadnej trasy jest wykluczone

EDIT: Już od próbował użyć preserveQueryParams: true jak:

this._router.navigate(["..", {currentPage: this.pagination.currentPage}], {preserveQueryParams: true});

aby dostać się łatwo użytkowej/przenoszonego rozwiązania, ale nie trzymać params matrycowych na trasie.

UPDATE: Już od wdrożone własną logikę, aby uzyskać wymagane zachowanie, tak oto fragment kodu na rozwiązanie:

let currentParamsArr: Params = this.route.snapshot.params; 
    let currentParamsObj: any = { }; 
    for (let param in currentParamsArr) { 
    currentParamsObj[param] = currentParamsArr[param]; 
    } 
    currentParamsObj.currentPage = +pageNum; //typecasting shortcut 

    this._router.navigate([currentParamsObj], { relativeTo: this.route }); 

Ten kod pętle poprzez parametry (jak stoją w migawce) i tworzy z nich obiekt, a następnie dodaje/edytuje parametr, który chcę zaktualizować, a następnie przechodzi do "nowej" trasy

Ale to nie jest ładne, ponieważ zasadniczo będę miał tę samą logikę w w wielu miejscach programu lub trzeba wprowadzić modyfikację routera lub podać inną ogólną metodę.

Answer 1

podejście, że skończyło się działa dobrze dla mnie jest to:

let route: ActivatedRoute; 
const newUrl = router.createUrlTree([ 
    merge({'a': 123}, route.snapshot.params) 
], {relativeTo: route}); 

Korzystając scalania można dodawać, aktualizować i odejmować parametrów URL i następnie użyj router.navigateByUrl(newUrl), aby wykonać.

add: merge({newParam: 111}, route.snapshot.params) 

update: merge({param: 111}, route.snapshot.params) 

subtract: merge({param: null}, route.snapshot.params) 

Mam nadzieję, że inni uważają to za przydatne, tak jak ja.

Inny przykład za pomocą Object.assign zamiast seryjnej:

let route = this.route; // The imported ActivatedRoute 
let currentParamsObj: Params = Object.assign({}, route.params); 

let newParam = {}; 
newParam[key] = value; 

let newUrl = this._router.createUrlTree([ 
     Object.assign(currentParamsObj, newParam) 
    ], {relativeTo: this.route }); 

this._router.navigateByUrl(newUrl); 

Answer 2

Czy próbowali za pomocą coś jak

this._router.navigateByUrl('/search;term='+this.term+';pageSize='+this.pageSize+';currentPage='+this.currentPage+';someFilter='+this.someFilter;