web-dev-qa-db-de.com

Angular 4 - Routenabfrageparameter verursachen einen Fehler bei der Pfadübereinstimmung

Nachdem ich mehrere Threads/Fragen zu den verschiedenen Routing-Typen in Angular 4 durchsucht habe, kann ich ein Problem nicht lösen, das mit der Übergabe von queryParams an eine Angular 4-Route zusammenhängt.

Bei der Übergabe entweder in die URL

http://localhost/search;x=y

durch die Vorlage [queryParams] = {x: 'y'}

<a [routerLink]="/search" [queryParams]="{x: 'y'}">Navigate</a>

oder in der Komponentenklasse

this._router.navigate(['/search'], { queryParams: {x: 'y'} });

das Ergebnis ist, dass der Router einen Übereinstimmungsfehler ausgibt:

Error: Cannot match any routes. URL Segment: 'search%3Fparam1%3Dtest1%26param2%3Dtest2'

Wenn Sie enableTracing auf true setzen, wird angezeigt, dass die Navigation die verdächtigen Zeichen codiert. Dies ist wahrscheinlich der Grund, warum sie nicht übereinstimmen.

Ich muss URLs verarbeiten, die queryParams enthalten, und sie für API-Aufrufe analysieren, daher muss die Route für den Abfrageparameter über erforderliche oder optionale Parameter verwendet werden.

Hat jemand ein ähnliches Problem gehabt und wenn ja, ist die Codierung die Ursache des Problems?

10
soulofahero

Abfrageparameter führen zu einer URL, die wie folgt aussieht:

http://localhost/search?x=y

Mit einem Fragezeichen, kein Semikolon.

Hier finden Sie eine Zusammenfassung zum Arbeiten mit Abfrageparametern.

enter image description here

Beachten Sie, dass sie nicht als Teil der Routendefinition konfiguriert sind .

Ihre RouterLink- und Navigationsmethode sieht korrekt aus.

Update:
Stellen Sie sicher, dass Sie diesen Import verwenden.

import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {}
18
DeborahK

Nach einiger Überlegung konnte ich das Problem beheben.

Ich habe ActivatedRouteSnapshot verwendet, um die URL (einschließlich der Abfrageparameter) als Ganzes zu speichern und sie dann an den Router weiterzuleiten.

Ich hätte die Abfrageparameter in einem separaten Objekt zur Route speichern und in using übergeben sollen

this._router.navigate(['/search'], { queryParams: paramsObj });

Natürlich schlug die Routenübereinstimmung fehl, da nicht alle am Ende der Zeichenfolge hinzugefügten Abfrageparameter mit einer Route übereinstimmen konnten.

11
soulofahero

Der folgende Code hat mich gerettet:

         this.router.navigate(['route-name'], { queryParams: {key:'value'} });        

Am empfangenden Ende holen Sie den Wert durch: (Ich nehme an, ActivatedRoute wird an Ort und Stelle injiziert),

         this.route.queryParams.subscribe(params => {console.log(queryParams['key'])}

Oder auf Vorlagenebene können Sie so schreiben.

 **<a [routerLink]="['/login']" [queryParams]="{ key: 'employer'}" >sign in</a></p>**

Hinweis: route ist eine Instanz von ActivatedRoute.

2
Dila Gurung

Sie möchten beispielsweise einen Link hinzufügen, der mit der Variablen zur Suchseite umleitet: searchString = 'search'

<a [routerLink]="['/search', searchString]">Navigate</a>

In Ihrer Komponente können Sie eine Navigation erstellen, indem Sie this._router.navigate(['/search', this.searchString]); verwenden, wobei searchString in beiden Fällen als const deklariert wird.

2
Mark Oghifo