角4 - 経路照合パラメータが経路一致失敗を引き起こす

Question

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

いずれかのURLにテンプレート[queryParams] = {X 'Y'}を介し

http://localhost/search;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呼び出しのためにそれらを解析する必要があります。したがって、必須パラメータまたはオプションのパラメータよりもクエリのparamルートを使用する必要があります。

誰もが似たような問題を抱えていましたか？その場合は、問題のルート（エーム）原因をエンコードしていますか？疑問符ではなく、セミコロンで

http://localhost/search?x=y 

：

Answer 1

クエリパラメータは、次のようになりますURLにつながります。

ここでは、クエリパラメータを操作する方法の概要を示します。

それらはルート定義の一部として構成されていないことに留意されたいです。

routerLinkとnavigateメソッドが正しいように見えます。

Answer 2

いくつかの審議の末、問題を解決できました。

私はActivatedRouteSnapshotを使用して、URL（クエリパラメータを含む）を全体として保存し、それをルータに渡していました。それはすべてのクエリのルートと一致しない可能性があるので

私はルートに個別のオブジェクトでクエリのparamsを保存し、ルートマッチングもちろん

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

を使用して、それらを通過しているはずではなかった追加のparamsストリングの終わりに。

Answer 3

たとえば、あなたが変数と検索ページにリダイレクトされますリンクを追加したい：searchStringのは=あなたのコンポーネントで

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

を「検索」、あなたはナビゲーションを作成することができますthis._router.navigate(['/search', this.searchString]);を使用すると、searchStringはどちらの場合でもconstとして宣言されます。