Ich habe eine Angular2 (v2.0.1) -Anwendung geschrieben, die den Router verwendet. Die Website wird mit mehreren Abfragezeichenfolgenparametern geladen, sodass die vollständige URL zunächst folgendermaßen aussieht:
https://my.application.com/?param1=val1¶m2=val2¶m3=val3
In meiner Routenkonfiguration habe ich einen Eintrag, der eine leere Route umleitet:
const appRoutes: Routes = [
{
path: '',
redirectTo: '/comp1',
pathMatch: 'full'
},
{
path: 'comp1',
component: FirstComponent
},
{
path: 'comp2',
component: SecondComponent
}
];
Mein Problem ist, dass die URL nach dem Booten der App keine Abfrageparameter mehr enthält, sondern wie folgt aussieht:
https://my.application.com/comp1
Gibt es eine Möglichkeit, den Router so zu konfigurieren, dass beim Navigieren die ursprüngliche Abfragezeichenfolge beibehalten wird?
Danke
Lukas
quelle
navigateByUrl
das nicht funktioniert. Es ist besser,navigate
immer zu verwenden .Wenn Sie mit einer HTML-Vorlage navigieren, können Sie diese verwenden
Beachten Sie, dass der Parameter queryParamsHandling ohne eckige Klammern steht.
quelle
Es stellt sich heraus, dass der undokumentierte Weg, dies ohne andere Hacks zu tun, darin besteht, einfach den führenden Schrägstrich im Feld "redirectTo" zu entfernen. Da Sie mit dem vollständigen Pfad übereinstimmen, können Sie sicher sein, dass er das tut, was Sie wollen (dh keine überraschenden URL-Segmente), und da es kein absolutes Ziel mehr ist, behält Angular die aktuellen Abfrageparameter bei.
Also in diesem Fall
wird:
Quelle: https://github.com/angular/angular/issues/13315
quelle
Die Antwort von Günter Zöchbauer sollte richtig funktionieren, aber aus irgendeinem Grund funktioniert sie bei mir überhaupt nicht. Was am Ende funktionierte, war das
queryParams
direkte Übergeben, anstatt sie zu "bewahren".So sieht meine Wache aus:
quelle
Möglicherweise möchten Sie https://github.com/angular/angular/issues suchen nach einer ähnlichen Funktionsanforderung . Wenn keine vorhanden ist, senden Sie eine Funktionsanforderung.
In der Zwischenzeit: Ich glaube, Sie müssen eine Komponente auf dem Pfad '' erstellen, mit dem alleinigen Zweck, dann zu '/ comp1' umzuleiten, während die QueryString-Parameter beibehalten werden.
quelle
Nachdem ich die meisten Antworten ausprobiert hatte, fand ich das
/
tat es auch nichthttps://my.application.com/comp1?param=val
<= (ಠ 益 ಠ)https://my.application.com/comp1;param=val
Hier ist noch ein weiterer Ansatz, der sich letztendlich gemäß meinen Erwartungen verhalten hat:
import { ActivatedRoute, Router } from '@angular/router'; class Component { constructor(private route: ActivatedRoute, private router: Router) {} someMethod() { router.navigate(['/comp1', this.route.snapshot.params]); } }
quelle
Wenn Sie mit einer HTML-Vorlage navigieren, können Sie diese auch verwenden
preserveQueryParams="true"
Beachten Sie, dass dies
preserveQueryParams
ohne eckige Klammer ist.Z.B:
<a [routerLink]="['/navigate-to']" preserveQueryParams="true">
quelle
preserveQueryParams
ist veraltet.Es gibt eine Problemumgehung für die Verwendung sekundärer Routen, da Angular diese über die primäre Routennavigation hinweg beibehält.
Fügen Sie zunächst einen benannten Router-Ausgang in Ihre oberste Komponente ein:
Erstellen Sie als Nächstes eine Dummy-Komponente, an die weitergeleitet werden soll:
und definieren Sie eine Route, um diese Komponente in den genannten Ausgang zu instanziieren:
Ändern Sie Ihre App-Navigation in:
https://my.application.com/(params:val1)
Wenn Sie sich eine ActivatedRoute ansehen, können Sie die "params" -Route finden, indem Sie:
Wenn paramsRoute null ist, enthält die URL nicht das (params: val1).
Dieser nächste Teil wird etwas "hackig", da die sekundäre Route beim ersten Laden nach der primären Route instanziiert wird. Aus diesem Grund ist paramsRoute.snapshot möglicherweise null, bis Ihre App vollständig geladen ist. Es gibt eine private Eigenschaft "_futureSnapshot", die die Routenparameter beim ersten Start enthält ... und während der gesamten Lebensdauer der App erhalten bleibt. Sie können diese erreichen, indem Sie:
Da _futureSnapshot nicht Teil der öffentlichen API ist, ist dies wahrscheinlich ein Feld, das wir nicht verwenden sollten. Wenn Sie Schwierigkeiten haben, es zu verwenden, könnten Sie wahrscheinlich paramsRoute.params abonnieren, aber dies wird Ihre Komponenten wahrscheinlich komplizieren.
========= ÄNDERUNG ==============
Ich habe einen noch besseren Weg gefunden, um die Abfrageparameter abzurufen, der definitiv NICHT icky ist ... Fügen Sie in einer Komponente oder einem Dienst, der vor dem Routing instanziiert wird, die folgende Logik hinzu:
Dieser Code abonniert vorübergehend RoutesRecognized-Ereignisse, die vor der Navigation auftreten. Nachdem das erste Ereignis empfangen wurde, wird es automatisch abgemeldet, da dies nur beim Starten der App erforderlich ist.
Beim ersten Ereignis suchen wir nach dem Status, der dem Ausgang "params" entspricht. Wenn gefunden, enthält die Eigenschaft params die Daten, die wir benötigen. Sie müssen nicht auf private Immobilien zugreifen.
quelle
Erfassen Sie die ursprüngliche URL in -base href-
https://example.com/order?id=123
dann wird es bestehen bleiben
https://example.com/order?id=123#/product
quelle