Ändern Sie die Routenparameter, ohne sie in Angular 2 neu zu laden

Ich erstelle eine Immobilienwebsite mit Angular 2, Google Maps usw. Wenn ein Benutzer die Mitte der Karte ändert, führe ich eine Suche in der API durch, die die aktuelle Position der Karte sowie den Radius angibt. Die Sache ist, ich möchte diese Werte in der URL widerspiegeln, 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.

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

HINWEIS: Dies kann andere Auswirkungen haben, z. B. die Umleitung von der aktuellen Route zur untergeordneten Route.

Verwandte Fragen, die beschreiben,location.gowerden nicht darauf hindeutenRouter, dass Änderungen eintreten.

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

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

Verwenden location.go(url)ist der richtige Weg, aber anstatt die URL fest zu codieren, sollten Sie sie mit generieren router.createUrlTree().

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

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

 this.location.go(url);

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

Ich hatte ein ähnliches Problem und versuchte zunächst, location.go und location.replaceState zu verwenden, wie in 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 durch location.go oder location.replaceState aktualisiert wurde (der Router weiß nichts darüber, was diese mit der URL machen)

Im Wesentlichen brauchte ich eine Lösung, die die Seite / Komponente NICHT neu lud, wenn sich der Routenparameter änderte, sondern 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 beispielsweise eine Bestellung speichern und eine Bestellnummer erhalten müssen, 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 innerhalb 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']);

Wenn Sie für eine vorhandene (gespeicherte) Bestellung direkt zur Bestellseite wechseln müssen, haben Sie folgende Möglichkeiten:

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

Ich hatte große Probleme damit, dass dies in RCx-Versionen von angle2 funktioniert. Das Location-Paket wurde verschoben, und die Ausführung von location.go () im Konstruktor () funktioniert nicht. Es muss ngOnInit () oder später im Lebenszyklus sein. Hier ist ein Beispielcode:

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

Hier sind die eckigen Ressourcen zu diesem Thema: https://angular.io/docs/ts/latest/api/common/index/Location-class.html https://angular.io/docs/ts/latest/api/ common / index / LocationStrategy-class.html

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 hierfür weitere Informationen hinzufügen sollte.

Wenn Sie den this.location.replaceState()Router Ihrer Anwendung verwenden, wird dieser nicht aktualisiert. Wenn Sie also später Router-Informationen verwenden, ist dies in Ihrem Browser nicht gleich. Wenn Sie beispielsweise localizeServicedie Sprache ändern, wird Ihre Anwendung nach dem Sprachwechsel wieder auf die letzte URL zurückgesetzt, mit der Sie sie zuvor geändert haben this.location.replaceState().

Wenn Sie dieses Verhalten nicht möchten, können Sie eine andere Methode zum Aktualisieren der URL auswählen, z.

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

Bei dieser Option wird Ihr Browser auch nicht aktualisiert, aber Ihre URLÄnderung wird auch in RouterIhre Anwendung übernommen. 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 wählen. Die erste ist leichter, da Sie Ihre Anwendung nur aktivieren, wenn Sie den URLBrowser ändern .

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

Durch die Verwendung von router.navigate wurde meine URL immer wieder zerstört, indem der Teil realtiveTo: enabledRoute nicht beachtet wurde.

Am Ende habe ich:

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

Verwenden Sie das Attribut queryParamsHandling: 'merge', während Sie die URL ändern.

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