Używam Angular 5.0.3, chciałbym uruchomić moją aplikację z kilkoma parametrami zapytania, takimi jak /app?param1=hallo¶m2=123
. Każda wskazówka podana w artykule Jak uzyskać parametry zapytania z adresu URL w Angular 2? nie działa dla mnie.
Jakieś pomysły, jak uzyskać parametry zapytania?
private getQueryParameter(key: string): string {
const parameters = new URLSearchParams(window.location.search);
return parameters.get(key);
}
Ta prywatna funkcja pomaga mi uzyskać parametry, ale nie sądzę, że jest to właściwa droga w nowym środowisku Angular.
[aktualizacja:] Moja główna aplikacja wygląda tak
@Component({...})
export class AppComponent implements OnInit {
constructor(private route: ActivatedRoute) {}
ngOnInit(): void {
// would like to get query parameters here...
// this.route...
}
}
Odpowiedzi:
W Angular 5 dostęp do parametrów zapytania uzyskuje się poprzez subskrybowanie
this.route.queryParams
.Przykład:
/app?param1=hallo¶m2=123
podczas gdy zmienne ścieżki są dostępne przez
this.route.snapshot.params
Przykład:
/param1/:param1/param2/:param2
źródło
To dla mnie najczystsze rozwiązanie
źródło
Wiem, że OP poprosił o rozwiązanie Angular 5, ale jednak dla wszystkich, którzy natkną się na to pytanie dla nowszych (6+) wersji Angular. Cytując dokumenty dotyczące ActivatedRoute.queryParams (na których opiera się większość innych odpowiedzi):
Według Docs , prosty sposób uzyskania parametrów zapytania wyglądałby następująco:
Bardziej zaawansowane sposoby (np. Zaawansowane ponowne wykorzystanie komponentów) można znaleźć w tym rozdziale Dokumenty.
EDYTOWAĆ:
Jak słusznie wskazano w komentarzach poniżej, odpowiedź ta jest błędna - przynajmniej w przypadku wskazanym przez OP.
OP prosi o uzyskanie globalnych parametrów zapytania (/ app? Param1 = hallo & param2 = 123); w tym przypadku powinieneś użyć queryParamMap (tak jak w odpowiedzi @ dapperdan1985).
Z drugiej strony paramMap jest używany w parametrach specyficznych dla trasy (np. / app /: param1 /: param2, co daje / app / hallo / 123).
Dzięki @JasonRoyle i @daka za wskazanie tego.
źródło
queryParamMap
nieparamMap
można pobrać parametrów ciąg kwerendy?paramMap
że masz rację, nie działa.Możesz również użyć HttpParams , takich jak:
źródło
path: '', redirectTo: '/list'
. This.route.snapshot nie działa dla mnie, ponieważ przekierowuje do / list, co eliminuje ciąg zapytania „lang”. Ale to rozwiązanie działa dla mnie.AKTUALIZACJA
źródło
to dla mnie praca:
zobacz więcej opcji Jak uzyskać parametry zapytania z adresu URL w angular2?
źródło
Parametry zapytania i ścieżki (Angular 8)
W przypadku adresu URL takiego jak https://myapp.com/user/666/read?age=23 użyj
AKTUALIZACJA
W przypadku, gdy używasz,
this.router.navigate([someUrl]);
a parametry zapytania są osadzone wsomeUrl
ciągu znaków, angular koduje adres URL i dostajesz coś takiego https://myapp.com/user/666/read%3Fage%323 - a powyższe rozwiązanie da zły wynik ( queryParams będzie pusta, a parametry ścieżki można przykleić do ostatniego parametru ścieżki, jeśli znajduje się na końcu ścieżki). W takim przypadku zmień sposób nawigacji na tenźródło
Natknąłem się na to pytanie, gdy szukałem podobnego rozwiązania, ale nie potrzebowałem niczego takiego jak routing na poziomie aplikacji lub więcej zaimportowanych modułów.
Poniższy kod działa świetnie do mojego użytku i nie wymaga żadnych dodatkowych modułów ani importów.
http://localhost:4200/?param1=hello¶m2=123
wyjścia:źródło
Niestety, najczystsze rozwiązanie nie jest rozwiązaniem najbardziej rozszerzalnym. W ostatnich wersjach Angular sugeruje się, że w innych odpowiedziach można łatwo uzyskać parametry zapytania za pomocą metody ActivatedRoute Injectible i specjalnie wykorzystując jedną z właściwości migawki:
lub właściwość subscribe (używana w przypadkach, gdy ciąg zapytania zostanie zaktualizowany, np. podczas nawigacji po identyfikatorach użytkowników):
Jestem tutaj, aby powiedzieć, że te rozwiązania mają ziejącą wadę, która nie została rozwiązana od jakiegoś czasu: https://github.com/angular/angular/issues/12157
Podsumowując, jedynym rozwiązaniem jest użycie starego, dobrego, waniliowego javascript. W tym przypadku stworzyłem usługę do manipulacji adresem URL:
źródło
Angular Router udostępnia metodę parseUrl (url: string), która analizuje adres URL w UrlTree . Jedną z właściwości UrlTree są queryParams. Więc możesz zrobić coś takiego:
źródło
Gdy masz pusty obiekt trasy, wynika to głównie z faktu, że nie używasz gniazda routera w swoim app.component.html.
Bez tego nie będziesz w stanie uzyskać znaczącego obiektu trasy z niepustymi subObjectami, szczególnie params & queryParams.
Spróbuj dodać
<router-outlet><router-outlet>
tuż przed telefonem<app-main-component></app-main-component>
Wcześniej upewnij się, że masz gotowy parametr zapytania w routingu aplikacji,> który eksportuje klasę Route używaną przez składnik aplikacji:
Ostatnią rzeczą, oczywiście, aby uzyskać parametr, osobiście używam,
this.route.snapshot.params.dynamicParam
gdzie dynamicParam jest nazwą używaną w komponencie routingu aplikacji :)źródło
Uważaj na swoje trasy. „RedirectTo” usunie | upuści każdy parametr zapytania.
Wywołałem mój główny komponent z parametrami zapytania, takimi jak „/ main? Param1 = a & param2 = b, i założyłem, że parametry zapytania docierają do metody„ ngOnInit () ”w głównym komponencie, zanim przekierowanie zacznie działać.
Ale to jest złe. Przekierowanie pojawiło się wcześniej, porzuca parametry zapytania i wywołuje metodę ngOnInit () w głównym komponencie bez parametrów zapytania.
Zmieniłem trzecią linię moich tras na
a teraz moje parametry zapytania są dostępne w głównych komponentach ngOnInit, a także w PageOneComponent.
źródło
Znalezione w: Komponenty nadrzędne otrzymują puste Params z ActivatedRoute
Pracował dla mnie:
źródło
Natknąłem się tylko na ten sam problem i większość odpowiedzi wydaje się rozwiązywać go tylko dla wewnętrznego routingu Angular, a następnie niektóre z nich dla parametrów trasy, które nie są takie same jak parametry żądania.
Zgaduję, że mam podobny przypadek użycia do oryginalnego pytania Larsa.
Dla mnie przypadek użycia to np. Śledzenie skierowań:
Angular działa na
mycoolpage.com
, z routingiem skrótu, więcmycoolpage.com
przekierowuje domycoolpage.com/#/
. Jednak w przypadku skierowania link taki jakmycoolpage.com?referrer=foo
powinien być również użyteczny. Niestety, Angular natychmiast usuwa parametry żądania, przechodząc bezpośrednio domycoolpage.com/#/
.Wszelkiego rodzaju „sztuczki” z użyciem pustego komponentu + AuthGuard i otrzymaniem
queryParams
lub wykonaniemqueryParamMap
, niestety, nie działały dla mnie. Zawsze były puste.Moje zmyślone rozwiązanie polegało na tym, że załatwiłem to w małym skrypcie, w
index.html
którym pobiera się pełny adres URL z parametrami żądania. Następnie otrzymuję wartość parametru żądania poprzez manipulację ciągiem i ustawiam ją na obiekcie okna. Następnie oddzielna usługa obsługuje pobieranie identyfikatora z obiektu okna.index.html skrypt
Usługa
źródło
źródło
http: // localhost: 4200 / products? order = popular
Możemy uzyskać dostęp do parametru zapytania zamówienia w następujący sposób:
Istnieje również queryParamMap, który zwraca obserwowalny obiekt paramMap.
Biorąc pod uwagę następujący adres URL trasy:
http: // localhost: 4200 / products? order = popular & filter = new
Źródło - https://alligator.io/angular/query-parameters/
źródło
Myślę, że w Angular 8:
ActivatedRoute.params
został zastąpiony przezActivatedRoute.paramMap
ActivatedRoute.queryParams
został zastąpiony przezActivatedRoute.queryParamMap
źródło
źródło
Jeśli nie używasz routera Angular, spróbuj, querystring . Zainstaluj to
do swojego projektu. W swoim komponencie zrób coś takiego
Jest
substring(1)
to konieczne, ponieważ jeśli masz coś takiego,'/mypage?foo=bar'
nazwa klucza będzie?foo
źródło