Zmiana parametrów trasy bez ponownego ładowania w kanciastym 2

Question

Tworzę witrynę nieruchomości za pomocą kanciastych 2, mapy google itp., A gdy użytkownik zmienia środek mapy, wykonuję wyszukiwanie do interfejsu informującego o aktualnej pozycji mapa, jak również promień. Chodzi o to, że chcę odzwierciedlić te wartości w adresie URL bez przeładowywania całej strony. Czy to jest możliwe? Znalazłem kilka rozwiązań przy użyciu AngularJS 1.x, ale nic o kątowym 2.

Answer 1

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

NOTE this could cause other effect like redirect to child route from the current route.

Related question który opisuje location.go nie intymny do Router wydarzy zmian.

Answer 2

Miałem poważne problemy z uzyskaniem tego do pracy w wydaniach RCx z angular2. Pakiet Location został przeniesiony, a uruchomienie obiektu location.go() wewnątrz konstruktora() nie będzie dział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 kątowe środki na ten temat: https://angular.io/docs/ts/latest/api/common/index/Location-class.html https://angular.io/docs/ts/latest/api/common/index/LocationStrategy-class.html

Answer 3

Od RC6 można wykonać następujące czynności, aby zmienić adres URL bez stanu zmian i utrzymując swoją historię trasy

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.replaceState("/some/newstate/"); 
    } 
} 

Answer 4

Dla każdego takiego jak ja, znajdującego to pytanie, mogą być przydatne następujące rzeczy.

Miałem podobny problem i początkowo próbowałem użyć location.go i location.replaceState, jak zasugerowano w innych odpowiedziach tutaj. Wystąpiły jednak problemy, gdy musiałem przejść do innej strony w aplikacji, ponieważ nawigacja była względna w stosunku do bieżącej trasy, a aktualna trasa nie była aktualizowana przez location.go lub location.replaceState (router nic nie wie o tym, co robią to w adresie URL)

W istocie potrzebowałem rozwiązania, które NIE POWIĄZYŁO ponownie strony/komponentu, gdy parametr trasy został zmieniony, ale DID aktualizował stan trasy wewnętrznie.

Skończyłem z wykorzystaniem parametrów zapytania. Więcej informacji na ten temat można znaleźć tutaj: https://angular-2-training-book.rangle.io/handout/routing/query_params.html

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 jest w samym centrum i danych na mapie byłby podobny

// 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 śledzić jej w metodzie ngOnInit jak:

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 trzeba przejść bezpośrednio do strony zamówienia z nowy (niezapisana) zamówienie można zrobić:

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

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

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

Answer 5

Użycie numeru jest sposobem na wykonanie, ale nie buduj adresu URL samodzielnie! Użyj router.createUrlTree().

Wyobraź sobie, że masz nawigację na swojej stronie: this.router.navigate([{param: 1}], {relativeTo: this.activatedRoute}), ale teraz nie chcesz, aby składnik był ponownie ładowany, po prostu ustaw parametr na adresie URL. Można to osiągnąć, szeregując adres URL:

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

this.location.go(url); 

Answer 6

Dla mnie była to mieszanka obu z Angular 4.4.5.

Użycie router.navigate stale niszcząc mój adres URL, nie respektując realtiveTo: activatedRoute part.

mam skończył z:

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