Zmień parametry trasy bez przeładowywania w Angular 2

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.

Możesz użyć, location.go(url)który zasadniczo zmieni Twój adres URL, bez zmiany trasy aplikacji.

UWAGA może to spowodować inne skutki, takie jak przekierowanie do trasy podrzędnej z bieżącej trasy.

Powiązane pytanie, które opisujelocation.go, nie spowodujeRouterzmian.

Od wersji RC6 możesz wykonać następujące czynności, aby zmienić adres URL bez zmiany stanu, a tym samym zachować historię tras

    import {OnInit} from '@angular/core';

    import {Location} from '@angular/common'; 
    // If you dont import this angular will import the wrong "Location"

    @Component({
        selector: 'example-component',
        templateUrl: 'xxx.html'
    })
    export class ExampleComponent implements OnInit {
        
        constructor( private location: Location )
        {}

        ngOnInit() {    
            this.location.replaceState("/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:

const url = this.router.createUrlTree([], {relativeTo: this.activatedRoute, queryParams: {param: 1}}).toString()

 this.location.go(url);

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

// let's say we're saving an order. Initally the URL is just blah/orders
save(orderId) {
    // [Here we would call back-end to save the order in the database]

    this.router.navigate(['orders'], { queryParams: { id: orderId } });
    // now the URL is blah/orders?id:1234. We don't reload the orders
    // page or component so get desired behaviour of not seeing any 
    // flickers or resetting the page.
}

i śledzisz to w ramach metody ngOnInit, np .:

ngOnInit() {
    this.orderId = this.route
        .queryParamMap
        .map(params => params.get('id') || null);
    // orderID is up-to-date with what is saved in database now, or if
    // nothing is saved and hence no id query paramter the orderId variable
    // is simply null.
    // [You can load the order here from its ID if this suits your design]
}

Jeśli chcesz przejść bezpośrednio do strony zamówienia z nowym (niezapisanym) zamówieniem, możesz zrobić:

this.router.navigate(['orders']);

Lub jeśli chcesz przejść bezpośrednio do strony zamówienia istniejącego (zapisanego) zamówienia, możesz zrobić:

this.router.navigate(['orders'], { queryParams: { id: '1234' } });

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:

import {OnInit} from '@angular/core';
import {Location} from '@angular/common';

@Component({
  selector: 'example-component',
  templateUrl: 'xxx.html'
})
export class ExampleComponent implements OnInit
{
  constructor( private location: Location )
  {}

  ngOnInit()
  {    
    this.location.go( '/example;example_param=917' );
  }
}

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

Używam tego sposobu, aby to uzyskać:

const queryParamsObj = {foo: 1, bar: 2, andThis: 'text'};

this.location.replaceState(
  this.router.createUrlTree(
    [this.locationStrategy.path().split('?')[0]], // Get uri
    {queryParams: queryParamsObj} // Pass all parameters inside queryParamsObj
  ).toString()
);

-- 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żywasz localizeServicedo 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:

this.router.navigate(
  [this.locationStrategy.path().split('?')[0]],
  {queryParams: queryParamsObj}
);

W tej opcji twoja przeglądarka również się nie odświeża, ale twoja URLzmiana jest również wprowadzana do Routertwojej aplikacji, więc kiedy zmieniasz język, nie masz problemu jak w this.location.replaceState().

Oczywiście możesz dobrać metodę do swoich potrzeb. Pierwsza jest lżejsza, ponieważ nie angażujesz aplikacji bardziej niż zmianę URLw przeglądarce.

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:

this._location.go(this._router.createUrlTree([this._router.url], { queryParams: { profile: value.id } }).toString())

Użyj atrybutu queryParamsHandling: 'merge' podczas zmiany adresu URL.

this.router.navigate([], {
        queryParams: this.queryParams,
        queryParamsHandling: 'merge',
        replaceUrl: true,
});