Modificare i parametri del percorso senza ricaricare in angolare 2

Question

Sto creando un sito web immobiliare utilizzando angular 2, google maps, ecc. E quando un utente cambia il centro della mappa eseguo una ricerca verso l'api che indica la posizione corrente di la mappa e il raggio. Il fatto è che voglio riflettere quei valori nell'url senza ricaricare l'intera pagina. È possibile? Ho trovato alcune soluzioni usando AngularJS 1.x ma nulla di angolare 2.

Answer 1

È possibile utilizzare location.go(url) che sostanzialmente cambierà l'indirizzo, senza modifiche nel percorso dell'applicazione.

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

Related question che descrive location.go volontà non intimo Router accadere cambiamenti.

Answer 2

Ho avuto grossi problemi nel far funzionare questo nei rilasci RCx di angular2. Il pacchetto Location è stato spostato e l'esecuzione di location.go() all'interno di constructor() non funzionerà. Deve essere ngOnInit() o successivo nel ciclo di vita. Ecco qualche esempio di codice:

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'); 
    } 
} 

Qui ci sono le risorse angolari in materia: 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

Come di RC6 che si possono fare le seguenti operazioni per cambiare URL senza stato di cambiamento e mantenendo in tal modo la vostra storia di percorso

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

Per chi come me, trovando questa domanda, potrebbe essere utile quanto segue.

Ho avuto un problema simile e inizialmente ho provato a utilizzare location.go e location.replaceState come suggerito in altre risposte qui. Tuttavia mi sono imbattuto in problemi quando ho dovuto navigare verso un'altra pagina sull'app perché la navigazione era relativa al percorso corrente e il percorso corrente non veniva aggiornato da location.go o location.replaceState (il router non sa nulla su cosa facciano all'URL)

In sostanza avevo bisogno di una soluzione che NON HA RIPRISTINATO la pagina/componente quando il parametro del percorso è cambiato ma DID aggiorna internamente lo stato del percorso.

Ho finito per utilizzare i parametri di query. Puoi trovare maggiori informazioni qui: https://angular-2-training-book.rangle.io/handout/routing/query_params.html

Quindi, se devi fare qualcosa come salvare un ordine e ottenere un ID ordine, puoi aggiornare l'URL della tua pagina come mostrato di seguito. Aggiornamento di una posizione centrale ei relativi dati su una mappa sarebbe simile

// 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. 
} 

e tenere traccia di esso all'interno del metodo ngOnInit come:

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] 
} 

Se avete bisogno di andare direttamente alla pagina di ordine con una nuova (non salvato) ordine si può fare:

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

Oppure, se avete bisogno di andare direttamente alla pagina d'ordine per un ordine esistente (salvato) si può fare:

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

Answer 5

Utilizzare location.go(url) è la strada da percorrere, ma non creare l'URL da soli! Utilizzare router.createUrlTree().

Immagina di avere questa navigazione sulla tua pagina: this.router.navigate([{param: 1}], {relativeTo: this.activatedRoute}) ma ora non vuoi che il componente venga ricaricato, vuoi solo impostare il parametro sull'URL. Ciò può essere ottenuto dalla serializzazione l'URL:

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

this.location.go(url); 

Answer 6

Per me è stato in realtà un mix di entrambi con angolare 4.4.5.

L'utilizzo di router.navigate ha continuato a distruggere il mio URL non rispettando la parte realtiveTo: activatedRoute.

ho finito con:

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