Angular 4 - 路徑查詢參數導致路徑匹配失敗

在Angular 4中搜索多個線程/問題後，我無法解決與傳遞queryParams到Angular 4路由有關的問題。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，並解析它們的API調用，所以查詢參數路由必須使用所需或可選參數。

有沒有人有類似的問題，如果是的話，是編碼問題的根源（ahem。）原因？

你能告訴我們你的路線在定義路徑嗎？它應該是'{path：'search /：x'，component：MyComponent}'。如果沒有，這是你的錯誤！ – trichetriche

不完全。 QueryParams應該不**在路由定義中定義。如果他們是...那麼*那*是問題。 :-) – DeborahK

查詢參數導致URL看起來像這樣：

http://localhost/search?x=y

一個問號，而不是一個分號。

下面是如何使用查詢參數的摘要。

注意，他們是不配置爲路由定義的一部分。

您的routerLink和導航方法看起來正確。

2017-09-01 21:29:54 DeborahK

你的router.navigate調用在錯誤的地方有方括號，需要是['/ products']，{etc ...}。 – Matt

你說得對。我已經修復它在這篇文章中：https://stackoverflow.com/questions/44864303/sending-data-with-route-navigate-in-angular-2/44865817#44865817但錯過了這一個。 – DeborahK

經過一番商議，我能夠解決這個問題。

我使用ActivatedRouteSnapshot作爲一個整體來存儲URL（包括查詢參數），然後將其傳遞給路由器。

我應該存儲在查詢參數在一個單獨的對象路線和使用過它們

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

當然路徑一致失敗，因爲它不能匹配添加了所有查詢參數的路線到字符串的末尾。

2017-10-05 10:28:59 soulofahero

例如，要添加一個鏈接，將重定向到具有可變搜索頁面：搜索字符串=「搜索」

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

在你的組件，你可以創建一個導航通過使用this._router.navigate(['/search', this.searchString]);，其中searchString在這兩種情況下都被聲明爲const。

2017-12-14 11:57:29

回答