it-swarm.com.de

Ändern Sie die Routenparameter ohne erneutes Laden in angular 2

Ich erstelle eine Immobilienwebsite mit angular 2, Google Maps usw.). Wenn ein Benutzer den Mittelpunkt der Karte ändert, führe ich eine Suche auf der API durch, die die aktuelle Position der Karte angibt Ich möchte diese Werte in der URL wiedergeben, ohne die gesamte Seite neu zu laden. Ist das möglich? Ich habe einige Lösungen mit AngularJS 1.x gefunden, aber nichts über angular 2.

83
Marcos Basualdo

Sie können location.go(url) verwenden, wodurch sich Ihre URL grundsätzlich ändert, ohne dass sich der Anwendungsweg ändert.

[~ # ~] Hinweis [~ # ~] Dies kann andere Auswirkungen haben, z. B. die Umleitung von der aktuellen Route zur untergeordneten Route.

Verwandte Frage die beschreibt, location.go Wird nicht an Router Änderungen passieren.

67
Pankaj Parkar

Ab RC6 können Sie wie folgt vorgehen, um die URL zu ändern, ohne den Status zu ändern, und so den Routenverlauf zu speichern

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/");
  }
}
71
tjuzbumz

Die Verwendung von location.go(url) ist der richtige Weg, aber anstatt die URL fest zu codieren, sollten Sie erwägen, sie mit router.createUrlTree() zu generieren.

Vorausgesetzt, Sie möchten den folgenden Router-Aufruf ausführen: this.router.navigate([{param: 1}], {relativeTo: this.activatedRoute}), aber ohne die Komponente neu zu laden, kann sie wie folgt umgeschrieben werden:

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

 this.location.go(url);
44
golfadas

Für jemanden wie mich, der diese Frage findet, könnte das Folgende nützlich sein.

Ich hatte ein ähnliches Problem und habe zunächst versucht, location.go und location.replaceState zu verwenden, wie in den anderen Antworten hier vorgeschlagen. Ich hatte jedoch Probleme, als ich zu einer anderen Seite in der App navigieren musste, da die Navigation relativ zur aktuellen Route war und die aktuelle Route nicht von location.go oder location.replaceState aktualisiert wurde (der Router weiß nichts) über das, was diese mit der URL machen)

Im Wesentlichen brauchte ich eine Lösung, bei der die Seite/Komponente nicht neu geladen wurde, wenn sich der Routenparameter änderte, aber DID den Routenstatus intern aktualisierte.

Am Ende habe ich Abfrageparameter verwendet. Weitere Informationen finden Sie hier: https://angular-2-training-book.rangle.io/handout/routing/query_params.html

Wenn Sie also eine Bestellung speichern und eine Bestell-ID erhalten möchten, können Sie Ihre Seiten-URL wie unten gezeigt aktualisieren. Das Aktualisieren eines Zentrumsstandorts und zugehöriger Daten auf einer Karte wäre ähnlich

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

und Sie verfolgen es in der ngOnInit-Methode wie folgt:

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

Wenn Sie mit einer neuen (nicht gespeicherten) Bestellung direkt zur Bestellseite gehen müssen, haben Sie folgende Möglichkeiten:

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

Oder wenn Sie für eine vorhandene (gespeicherte) Bestellung direkt zur Bestellseite gehen müssen, können Sie Folgendes tun:

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

Ich benutze diesen Weg, um es zu bekommen:

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()
);

- BEARBEITEN -

Ich denke, dass ich noch ein paar Informationen dazu hinzufügen sollte.

Wenn Sie this.location.replaceState() router in Ihrer Anwendung verwenden, wird dies nicht aktualisiert. Wenn Sie also später Routerinformationen verwenden, ist dies in Ihrem Browser nicht gleichbedeutend. Wenn Sie zum Beispiel localizeService verwenden, um die Sprache zu ändern, wechselt Ihre Anwendung nach dem Wechseln der Sprache wieder zu der letzten URL, unter der Sie sich befanden, bevor Sie sie mit this.location.replaceState() geändert haben.

Wenn Sie dieses Verhalten nicht möchten, können Sie eine andere Methode für die Update-URL auswählen, z.

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

In dieser Option wird Ihr Browser auch nicht aktualisiert, aber Ihre URL Änderung wird auch in Router Ihrer Anwendung eingefügt. Wenn Sie also die Sprache wechseln, haben Sie keine Probleme wie in this.location.replaceState().

Natürlich können Sie die Methode für Ihre Bedürfnisse auswählen. Der erste ist leichter, da Sie Ihre Anwendung nicht mehr einbinden, als URL im Browser zu ändern.

3
kris_IV

Für mich war es eigentlich eine Mischung aus beidem mit Angular 4.4.5.

Bei Verwendung von router.navigate wurde meine URL weiterhin zerstört, da der Teil "realtiveTo: enabledRoute" nicht beachtet wurde.

Ich habe am Ende mit:

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