Wprowadzenie
Podczas budowania aplikacji mogą wystąpić scenariusze, w których chcemy przekazać pewne argumenty lub parametry opisujące zachowanie trasy. W Angular, są one nazywane parametrami zapytania, i są one opcjonalne. Parametrów zapytania nie należy mylić ze zwykłymi trasy parametrami, które są parametrami wymaganymi i są powiązane tylko z jedną trasą.
Aby wyjaśnić różnicę między parametrami trasy a parametrami zapytania, wyobraź sobie, że budujesz aplikację przechowującą produkty. Możesz mieć trasę, która otwiera konkretny produkt za pomocą product_id. Możesz również określić parametr zapytania: read_only. Gdy read_only jest ustawione na true, użytkownik może tylko przeglądać rekord, podczas gdy gdy read_only wynosi false, użytkownik może również edytować rekord. W ten sposób, korzystając tylko z jednej trasy, można obsłużyć zarówno przypadek edycji, jak i podglądu. Tutaj product_id to parametr trasy a read_only który jest opcjonalny, to parametr zapytania parameter.
Wymagania wstępne
Aby w pełni zrozumieć ten artykuł, wymagana jest znajomość budowania aplikacji przy użyciu Angulara. Pomocne będzie również doświadczenie z Angular Router, RouterLink i ActivatedRoute.
Przekazywanie parametrów zapytania za pomocą Router.navigate
Jeśli używasz Router.navigate do nawigacji między trasami, użyj queryParams do przesłania parametrów zapytania.
W powyższym przykładzie, jeśli chcemy, aby odwiedzający zobaczyli listę produktów posortowaną według popularności, użyjemy poniższego kodu:
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular' } } ); } |
Po użyciu tego kodu adres URL będzie wyglądał następująco:
|
1 |
http://localhost:4200/products?order=popular |
Mogą jednak wystąpić scenariusze, w których podczas nawigacji musimy przekazać wiele parametrów. Na przykład, jeśli chcemy posortować produkty według popularności, a także według ceny, możemy użyć poniższego kodu:
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular', price: 'high-to-low' } } ); } |
Tym razem adres URL będzie wyglądał następująco:
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
To podsumowuje, jak ustawiać parametry zapytania za pomocą queryParams.
Zapobieganie utracie parametrów zapytania przy użyciu queryParamsHandling
Podczas nawigacji między trasami parametry mają tendencję do gubienia się. Przypuśćmy, że jeśli przekażemy argument arg0 nie zostanie on przekazany podczas kolejnego routingu. Możemy zapisać parametry za pomocą queryParamsHandling i ustawiając wartość na preserve lub merge.
W powyższym przykładzie załóżmy, że chcemy skierować odwiedzających na stronę marek ze strony produktu z parametrem trasy { order: 'popular' }, zachowując parametry trasy. Aby to zrobić, możemy użyć queryParamsHandling i ustawić go na preserve :
|
1 2 3 4 5 6 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParamsHandling: 'preserve' } ); } |
Spowoduje to, że adres URL będzie wyglądał następująco:
|
1 |
http://localhost:4200/users?brand=popular |
Następnie załóżmy, że chcemy zachować parametr zapytania poprzedniej trasy { order: 'popular' } przy jednoczesnym dodaniu nowych parametrów { price: 'high-to-low' }. Możemy ustawić queryParamsHandling na merge:
|
1 2 3 4 5 6 7 8 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParams: { price: 'high-to-low' }, queryParamsHandling: 'merge' } ); } |
Z powyższym kodem adres URL zmieni się na:
|
1 |
http://localhost:4200/brand?order=popular&price=high-to-low |
Na tym kończymy zachowywanie parametrów zapytania przy użyciu queryParamsHandling w celu zachowania lub scalenia.
Przekazywanie parametrów zapytania za pomocą RouterLink
Biorąc pod uwagę nasz poprzedni link, jeśli chcemy użyć dyrektywy RouterLink do nawigacji, będziemy musieli przekazać parametry zapytania za pomocą queryParams w następujący sposób:
|
1 2 3 |
<a [routerLink]="['/products']" [queryParams]="{ order: 'popular' }"> Produkty </a> |
Zauważ, jak przekazujemy obiekt do queryParams za pomocą wiązania jednokierunkowego. Możemy również przekazać cały obiekt jako queryParams .
Ponadto, jeśli chcemy przenieść te parametry zapytania do kolejnych nawigacji, możemy użyć opcji queryParamsHandling. Możliwe opcje dla queryParamsHandling to merge oraz preserve:
|
1 2 |
<a [routerLink]="['/products']" [queryParams]="{ filter: 'new', order: 'popular' }" queryParamsHandling="merge">Produkty</a> |
W tym miejscu zobaczyliśmy, jak przekazywać queryParams oraz jak obsługiwać parametry za pomocą queryParamsHandling w RouterLink.
Odczytywanie wartości parametrów zapytania
Do tej pory nauczyliśmy się, jak przekazywać parametry zapytania w ścieżce. Parametry te były opcjonalne i służyły do przekazywania informacji do strony docelowej. Wysyłanie parametrów to jedna część, ale konieczne jest również odczytanie ich z adresu URL i użycie ich.
W Angularze odczytujemy parametry zapytania ścieżki za pomocą klasy ActivatedRoute. Klasa ActivatedRoute posiada obserwowalną właściwość o nazwie queryParams służącą do ujawniania parametrów bieżącego adresu URL.
Załóżmy, że mamy do czynienia z następującym adresem URL:
|
1 |
http://localhost:4200/products?order=popular |
Aby uzyskać dostęp do parametru zapytania order w kodzie, używamy poniższego kodu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { ActivatedRoute } from '@angular/router'; import 'rxjs/add/operator/filter'; @Component({ ... }) export class SampleComponent implements OnInit { order: string; constructor(private route: ActivatedRoute) { } ngOnInit() { this.route.queryParams .filter(params => params.order) .subscribe(params => { console.log(params); // { order: "popular" } this.order = params.order; }); } } |
Tutaj w konsoli zobaczymy wartość parametru zapytania order o wartości “popular” wydrukowane. Jeśli mamy wiele parametrów zapytania, możemy użyć queryParamMap właściwości, która zwraca obiekt observable paramsMap .
Jeśli mamy adres URL z wieloma parametrami zapytania, takimi jak:
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
Możemy uzyskać dostęp do tych parametrów zapytania za pomocą poniższego kodu:
|
1 2 3 4 5 |
this.route.queryParamMap .subscribe((params) => { this.queryObj = { ...params.keys, ...params }; } ); |
Używając operatora spread dla obiektów w tym miejscu, otrzymujemy poniższy wynik:
|
1 2 3 4 5 6 7 8 |
{ "0": "order", "1": "filter", "params": { "order": "popular", "price": "high-to-low" } } |
Na koniec powinieneś już rozumieć, jak uzyskać dostęp do parametrów zapytania z wynikowych tras.
Podsumowanie
W tym samouczku przyjrzeliśmy się różnicy między parametrami zapytania a parametrami trasy. Przyjrzeliśmy się również temu, jak przekazywać argumenty między trasami jako parametry zapytania, a także jak pobierać je z powrotem na stronie za pomocą queryParams oraz queryParamsHandling z Router.navigate oraz RouterLink. Dowiedzieliśmy się również, jak obsługiwać queryParams oraz queryParamMap z ActivatedRoute.
Angular wymaga JavaScriptu u podstaw. Jeśli chcesz poszerzyć swoją wiedzę na temat JavaScriptu, możesz zapoznać się z następującymi blogami:
- Praca z JavaScript: Jak działają klasy
- Praca z JavaScript: Jak działają prototypy i dziedziczenie
- JavaScript: Samouczek dotyczący indeksowania, dzielenia i manipulowania ciągami znaków
Miłego programowania!
Komentarze
Brak komentarzy. Bądź pierwszy.