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.
javascript
angular
routes
angular2-routing
Marcos Basualdo
quelle
quelle
Antworten:
Sie können verwenden,
location.go(url)
wodurch sich Ihre URL grundsätzlich ändert, ohne den Anwendungsweg zu ändern.Verwandte Fragen, die beschreiben,
location.go
werden nicht darauf hindeutenRouter
, dass Änderungen eintreten.quelle
import { Location } from '@angular/common';
in Angular 4constructor(private location: Location){ }
location.go()
während Sie hätten tippen sollenthis.location.go()
. Wenn Sie das ausgebenthis.
, rufen Sie die Standortschnittstelle von Typescript auf.Ab RC6 können Sie die URL wie folgt ändern, ohne den Status zu ändern, und so Ihren Routenverlauf beibehalten
quelle
Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'some/newstate'
Verwenden
location.go(url)
ist der richtige Weg, aber anstatt die URL fest zu codieren, sollten Sie sie mit generierenrouter.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:quelle
this.router.createUrlTree([], {relativeTo: this.activatedRoute, queryParams: {param: 1}}).toString()
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
und Sie verfolgen es innerhalb der ngOnInit-Methode wie folgt:
Wenn Sie mit einer neuen (nicht gespeicherten) Bestellung direkt zur Bestellseite gehen müssen, haben Sie folgende Möglichkeiten:
Wenn Sie für eine vorhandene (gespeicherte) Bestellung direkt zur Bestellseite wechseln müssen, haben Sie folgende Möglichkeiten:
quelle
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:
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
quelle
Ich benutze diesen Weg, um es zu bekommen:
- 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 beispielsweiselocalizeService
die Sprache ändern, wird Ihre Anwendung nach dem Sprachwechsel wieder auf die letzte URL zurückgesetzt, mit der Sie sie zuvor geändert habenthis.location.replaceState()
.Wenn Sie dieses Verhalten nicht möchten, können Sie eine andere Methode zum Aktualisieren der URL auswählen, z.
Bei dieser Option wird Ihr Browser auch nicht aktualisiert, aber Ihre
URL
Änderung wird auch inRouter
Ihre Anwendung übernommen. Wenn Sie also die Sprache wechseln, haben Sie keine Probleme wie inthis.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
URL
Browser ändern .quelle
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:
quelle
Verwenden Sie das Attribut queryParamsHandling: 'merge', während Sie die URL ändern.
quelle