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

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

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

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

Vergessen Sie nicht, die queryParams auf dem Ziel zu abonnieren: stackoverflow.com/a/39146396/2726844

— Vince I

Oder wenn Sie Routen verwenden, runGuardsAndResolvers: 'always'wird die Route medium.com/engineering-on-the-incline/…

— Adam