Tworzę stronę internetową z nieruchomościami za pomocą Angular 2, Google Maps itp., A gdy użytkownik zmieni środek mapy, wyszukuję w API wskazując aktualną pozycję mapy oraz promień. Chodzi o to, że chcę odzwierciedlić te wartości w adresie URL bez ponownego ładowania całej strony. Czy to jest możliwe? Znalazłem kilka rozwiązań przy użyciu AngularJS 1.x, ale nic o Angular 2.
javascript
angular
routes
angular2-routing
Marcos Basualdo
źródło
źródło
Odpowiedzi:
Możesz użyć,
location.go(url)
który zasadniczo zmieni Twój adres URL, bez zmiany trasy aplikacji.Powiązane pytanie, które opisuje
location.go
, nie spowodujeRouter
zmian.źródło
import { Location } from '@angular/common';
w Angular 4constructor(private location: Location){ }
location.go()
podczas gdy powinieneś był pisaćthis.location.go()
. Kiedy emitujeszthis.
, wywołujesz interfejs lokalizacji Typescript.Od wersji RC6 możesz wykonać następujące czynności, aby zmienić adres URL bez zmiany stanu, a tym samym zachować historię tras
źródło
Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'some/newstate'
Używanie
location.go(url)
jest właściwą drogą, ale zamiast zakodować adres URL na stałe, rozważ wygenerowanie go za pomocąrouter.createUrlTree()
.Zakładając, że chcesz wykonać następujące wywołanie routera:
this.router.navigate([{param: 1}], {relativeTo: this.activatedRoute})
ale bez ponownego ładowania komponentu, można go przepisać jako:źródło
this.router.createUrlTree([], {relativeTo: this.activatedRoute, queryParams: {param: 1}}).toString()
Dla każdego, kto tak jak ja, znalazłby to pytanie, przydatne mogą być następujące informacje.
Miałem podobny problem i początkowo próbowałem użyć location.go i location.replaceState, jak sugerowano w innych odpowiedziach tutaj. Jednak napotkałem problemy, gdy musiałem przejść do innej strony w aplikacji, ponieważ nawigacja była względna do bieżącej trasy, a bieżąca trasa nie była aktualizowana przez location.go lub location.replaceState (router nic nie wie o tym, co robią z adresem URL)
Zasadniczo potrzebowałem rozwiązania, które NIE WADZI przeładowywania strony / komponentu, gdy zmienił się parametr trasy, ale NIE zaktualizował stanu trasy wewnętrznie.
Skończyło się na parametrach zapytania. Więcej na ten temat można znaleźć tutaj: https://angular-2-training-book.rangle.io/handout/routing/query_params.html
Więc jeśli chcesz zrobić coś takiego, jak zapisać zamówienie i uzyskać identyfikator zamówienia, możesz zaktualizować adres URL swojej strony, jak pokazano poniżej. Aktualizacja lokalizacji centrum i powiązanych danych na mapie byłaby podobna
i śledzisz to w ramach metody ngOnInit, np .:
Jeśli chcesz przejść bezpośrednio do strony zamówienia z nowym (niezapisanym) zamówieniem, możesz zrobić:
Lub jeśli chcesz przejść bezpośrednio do strony zamówienia istniejącego (zapisanego) zamówienia, możesz zrobić:
źródło
Miałem poważne problemy z uruchomieniem tego w wydaniach RCx angular2. Pakiet Location został przeniesiony i uruchomienie funkcji location.go () wewnątrz constructor () nie zadziała. Musi to być ngOnInit () lub później w cyklu życia. Oto przykładowy kod:
Oto zasoby kątowe w tej sprawie: https://angular.io/docs/ts/latest/api/common/index/Location-class.html https://angular.io/docs/ts/latest/api/ common / index / LocationStrategy-class.html
źródło
Używam tego sposobu, aby to uzyskać:
-- EDYTOWAĆ --
Myślę, że powinienem dodać więcej informacji na ten temat.
Jeśli używasz
this.location.replaceState()
routera, Twoja aplikacja nie jest aktualizowana, więc jeśli później użyjesz informacji o routerze, nie będzie to równe w Twojej przeglądarce. Na przykład, jeśli używaszlocalizeService
do zmiany języka, po zmianie języka aplikacji z powrotem na ostatni adres URL, gdzie byłeś przed zmianą za pomocąthis.location.replaceState()
.Jeśli nie chcesz tego zachowania, możesz wybrać inną metodę aktualizacji adresu URL, na przykład:
W tej opcji twoja przeglądarka również się nie odświeża, ale twoja
URL
zmiana jest również wprowadzana doRouter
twojej aplikacji, więc kiedy zmieniasz język, nie masz problemu jak wthis.location.replaceState()
.Oczywiście możesz dobrać metodę do swoich potrzeb. Pierwsza jest lżejsza, ponieważ nie angażujesz aplikacji bardziej niż zmianę
URL
w przeglądarce.źródło
Dla mnie była to właściwie mieszanka obu z Angular 4.4.5.
Korzystanie z router.navigate niszczyło mój adres URL, nie przestrzegając części realtiveTo: ActivatedRoute.
Skończyło się na:
źródło
Użyj atrybutu queryParamsHandling: 'merge' podczas zmiany adresu URL.
źródło