So übergeben Sie Abfrageparameter mit einem routerLink

161

Ich möchte einen Abfrageparameter übergeben prop=xxx.

Das hat nicht funktioniert

<a [routerLink]="['/somepath', {queryParams: {prop: 'xxx'}}]>Somewhere</a>
angular angular2-routing Günter Zöchbauer
quelle
Die Syntax, die Sie verwenden möchten, bezieht sich auf Matrixparameter. Dies ist das Formular <a [routerLink]="['/somepath', { foo: 'foo' }]">Somewhere</a>. Sie erhalten Matrix-URL-Parameter (Semikolon; anstelle von? Und & Trennzeichen) und können über ActivatedRoute.params statt enabledRoute.queryParams darauf zugreifen. Weitere Informationen finden Sie hier stackoverflow.com/questions/35688084/… und hier stackoverflow.com/questions/2048121/…
William Ardila
1
Abfrageparameter und Matrixparameter sind identisch. Der einzige Unterschied besteht darin, dass sie, wenn sie dem Stammsegment hinzugefügt werden, als Abfrageparameter serialisiert werden. Wenn sie einem untergeordneten Segment hinzugefügt werden, werden sie als Matrixparameter serialisiert.
Günter Zöchbauer
Weitere Unterschiede finden Sie unter web.archive.org/web/20130126100355/http://brettdargan.com/blog/…. Sie können auch die Syntax der Linkparameter im Angular-
William Ardila

Antworten:

325

queryParams

queryParamsist eine weitere Eingabe, routerLinkwo sie wie übergeben werden können

<a [routerLink]="['../']" [queryParams]="{prop: 'xxx'}">Somewhere</a>

fragment

<a [routerLink]="['../']" [queryParams]="{prop: 'xxx'}" [fragment]="yyy">Somewhere</a>

routerLinkActiveOptions

So legen Sie die aktive Klasse für Routen auch für übergeordnete Routen fest:

[routerLinkActiveOptions]="{ exact: false }"

Zur Abfrage Parameter zu übergeben this.router.navigate(...)Verwendung

let navigationExtras: NavigationExtras = {
  queryParams: { 'session_id': sessionId },
  fragment: 'anchor'
};

// Navigate to the login page with extras
this.router.navigate(['/login'], navigationExtras);

Siehe auch https://angular.io/guide/router#query-parameters-and-fragments

Günter Zöchbauer
quelle
Wie würde das programmatisch funktionieren? Ich habe es mit this.router.navigate versucht (['/ resetPassword', {queryParams: {username: loginName}}]); Aber das Ergebnis war: localhost: 8100 / resetPassword; queryParams =% 5Bobject% 20Object% 5D
Rickul
2
Ich habe meine Antwort aktualisiert. Siehe auch den Link, den ich hinzugefügt habe. Es zeigt ein vollständiges Beispiel.
Günter Zöchbauer
Anmerkungen des Paares: Rickuls Code sollte dort sein, [ '/resetPassword' ], { queryParams: { username: loginName }})wo er ]vor den Extras steht. Vergessen Sie auch nicht, dass bei Abfrageparametern zwischen Groß- und Kleinschreibung unterschieden wird.
Simon_Weaver
2
Vergessen Sie nicht, die queryParams auf dem Ziel zu abonnieren: stackoverflow.com/a/39146396/2726844
Vince I
1
Oder wenn Sie Routen verwenden, runGuardsAndResolvers: 'always'wird die Route medium.com/engineering-on-the-incline/…
Adam