web-dev-qa-db-ja.com

Angular 4-ルートクエリパラメータが原因でパス一致エラーが発生する

Angular 4内のさまざまなタイプのルーティングで複数のスレッド/質問を検索した後、queryParamsをAngular 4ルートに渡すことに関連する問題を解決できません。

どちらかをURLに渡すとき

http://localhost/search;x=y

テンプレートを介して[queryParams] = {x： 'y'}

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

またはコンポーネントクラス内

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

その結果、ルーターは一致エラーをスローします。

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

EnableTracingをtrueに設定すると、疑わしい文字がナビゲーションでエンコードされていることがわかります。これはおそらく、照合に失敗した理由です。

QueryParamsを含むurlを処理し、それらをapi呼び出し用に解析する必要があるため、query param routeは必須またはオプションのparamsよりも使用する必要があります。

誰もが同様の問題を抱えていますか？

angularangular2-routingurl-encodingquery-parameters
10
soulofahero

クエリパラメータにより、次のようなURLが生成されます。

http://localhost/search?x=y

セミコロンではなく疑問符が付いています。

クエリパラメータの使用方法の概要を次に示します。

enter image description here

ルート定義の一部として構成されているnotであることに注意してください。

RouterLinkおよびナビゲートメソッドが正しく見えます。

更新：
このインポートを必ず使用してください。

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

いくつかの審議の後、私は問題を修正することができました。

ActivatedRouteSnapshotを使用してURL（クエリパラメーターを含む）を全体として保存し、それをルーターに渡していました。

ルートへの別のオブジェクトにクエリパラメータを保存し、使用して渡す必要がありました

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

もちろん、文字列の最後に追加されたすべてのクエリパラメータを持つルートを一致させることができなかったため、ルートマッチングは失敗しました。

11
soulofahero

次のコードは私を救った：

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

受信側で次の方法で値を取得します（ActivatedRouteが挿入されたと仮定します）。

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

または、テンプレートレベルで次のように記述できます。

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

注：ルートはActivatedRouteのインスタンスです。

2
Dila Gurung

たとえば、変数を使用して検索ページにリダイレクトするリンクを追加します：searchString = 'search'

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

コンポーネントでは、this._router.navigate(['/search', this.searchString]);を使用してナビゲーションを作成できます。どちらの場合でもsearchStringはconstとして宣言されます。

2
Mark Oghifo