Jak dodawać/aktualizować parametry zapytania w Angular2

Question

Używam parametrów zapytania w mojej aplikacji, które chcę zachować/zaktualizować podczas nawigacji i aktualizacji ustawień. Mogę dodać parametr bez żadnych problemów, wykonując następujące czynności.

onNavigate() { 
this.router.navigate(['reports'], {queryParams: {'report': this.chart}, preserveQueryParams:true}); 
} 

Jednak chcę mieć możliwość zmiany parametru raportu i dołączania nowych parametrów do adresu URL w całej mojej aplikacji.

Użycie preserveQueryParams: true powoduje, że moje parametry są tylko do odczytu. Chcę móc aktualizować bieżące parametry i dodawać nowe bez utraty niczego, chyba że je wyczyściłem.

Jak mogę to zrobić bez utraty aktualnie ustawionych parametrów?

Answer 1

Domyślam się, że preserveQueryParams nie jest przeznaczony do dołączania/aktualizacji queryParams w imieniu aplikacji.

Musisz napisać swoją logikę, aby uzyskać istniejące zapytania i zaktualizować je zgodnie z wymaganiami, a następnie przekazać podczas nawigacji.

this.route.queryParams.subscribe(qparams => { 
    this.currentQueryParams= qparams; 
    }); 

    updatedqueryParams = // use this.currentQueryParams update it to append\update new stuff 
    let navigationExtras: NavigationExtras = { 
     queryParams: updatedqueryParams 
    }; 

    // Navigate to the login page with extras 
    this.router.navigate(['<some path>'], navigationExtras); 

co preserveQueryParams jest przeznaczona na to, aby przekazać obecny globalny queryParams jesteś routingu do,

więc jeśli aktualny adres URL jest

dashboard?debug=true&somevar=1 

i napisać coś jak poniżej,

this.router.navigate(['admin'], { 
     preserveQueryParams: true 
     } 
); 

Nowa trasa będzie, więc zachowuje parametry zapytania.

admin?debug=true&somevar=1 

Mam nadzieję, że to pomoże!

Answer 2

preserveQueryParams został uznany za przestarzały, należy zamiast tego użyć zapytania queryParamsHandling.

queryParamsHandling służy do konfiguracji strategii do obsługi parametrów zapytania dla następnej nawigacji.

https://angular.io/api/router/NavigationExtras