Eckige 4 - Route-query params verursachen Pfad entsprechen scheitern

Nach der Suche mehrere threads/Fragen die verschiedenen Arten von routing innerhalb Eckig 4, kann ich nicht beheben ein Problem, verbunden mit Weitergabe queryParams zu einer Eckigen 4-route.

Bei der übergabe entweder in der url

http://localhost/search;x=y

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

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

oder in der component-Klasse

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

das Ergebnis ist der router werfen ein Spiel Fehler:

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

Beim einstellen enableTracing zu wahren, ich kann sehen, dass die navigation codiert die verdächtigen Zeichen, die am wahrscheinlichsten ist der Grund, warum es andernfalls zu entsprechen.

Habe ich eine Anforderung zu verarbeiten urls enthalten, queryParams und analysieren Sie für api-Aufrufe, also die Abfrage param route verwendet werden muss, über die erforderlichen oder optionalen params.

Hat jemand schon ein ähnliches Problem und wenn ja, ist die Codierung der Wurzel (ähem.) Ursache des Problems?

Könnten Sie uns den Weg zeigen der Sie Ihre route in die definition ? Es sollte { path: 'search/:x', component: MyComponent}. Wenn nicht, hier ist Ihr Fehler !
Nicht ganz. QueryParams soll nicht definiert werden, die in der route-definition. Wenn Sie ..., dann das ist das problem. 🙂

InformationsquelleAutor soulofahero | 2017-09-01

  1. 15

    Query-Parameter das Ergebnis in eine url, die wie folgt aussieht: 

    http://localhost/search?x=y

    Mit einem Fragezeichen, nicht mit einem Semikolon.

    Hier ist eine Zusammenfassung, wie die Arbeit mit query-Parameter.

    Eckige 4 - Route-query params verursachen Pfad entsprechen scheitern

    Beachten Sie, dass Sie nicht konfiguriert als Teil der route definition.

    Ihre routerLink und die navigate-Methode sieht richtig.

    Ihrem router.navigieren Sie nennen, hat die schließende eckige Klammer an der falschen Stelle, muss ['/Produkte'], { usw... }.
    Du hast Recht. Ich hatte es fest in diesem Beitrag: stackoverflow.com/questions/44864303/..., Aber vergab diese.

    InformationsquelleAutor DeborahK

  2. 11

    Nach einiger überlegung war ich in der Lage, das Problem zu beheben.

    War ich mit ActivatedRouteSnapshot speichern Sie die url (einschließlich query params) als ganzes, dann die übergabe, die durch den router.

    Ich soll gespeichert sind query-Parameter in einem separaten Objekt, um die route und übergeben Sie bei der Nutzung von

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

    Natürlich die passende route scheiterte, es konnte nicht mit einer route mit allen query-Parameter Hinzugefügt, auf das Ende des Strings.

    InformationsquelleAutor soulofahero

  3. 1

    Folgenden code hat mich gerettet:

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

    Auf dem empfangenden Ende holt sich den Wert von: ( ich nehme an, ActivatedRoute injiziert Platz),

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

    Oder auf template-Ebene können Sie schreiben, wie diese.

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

    Hinweis: die route ist eine Instanz von ActivatedRoute.

    InformationsquelleAutor Dila Gurung

Schreibe einen Kommentar