多QueryParams具有相同的密鑰

Question

我工作的過濾器和過濾器我有三類：

• 顏色
• 尺寸
• 產地

現在我有一點麻煩處理多個過濾器。就像：

www.myApp.com/search?query=*&colour=blue&size=medium,large&origin=germany 

首先，我想知道是否有關URL的語法，如果有一個標準？例如，這尤其關於size。在顯示網址中，我顯示了這樣的值：size=medium,large。但有時候我看到網址顯示：size=medium&size=large。

有沒有正確的方法？

還有更多如何處理angular2/4中的多個相同的鍵？似乎this.route.queryParams.subscribe(queryParams => {});無法檢測到現有QueryParams中的更改。因此，例如來自何處：

www.myApp.com/search?query=*&colour=blue&origin=germany 

添加尺寸=中炒菜：

www.myApp.com/search?query=*&colour=blue&size=medium&origin=germany 

但變化檢測不piking，如果我添加其他元素，如：

www.myApp.com/search?query=*&colour=blue&size=medium,large&origin=germany 

Answer 1

逗號是URL查詢中的保留字符。根據標準，但這並不意味着你不能使用它。你只需要首先逃避角色。

所以你會寫這樣的網址：

www.myApp.com/search?query=*&colour=blue&size=medium%2Clarge&origin=germany 

這可能是在某些情況下的疼痛。因此，您可以使用加號字符+而不是逗號，因爲它不是保留字符。

www.myApp.com/search?query=*&colour=blue&size=medium+large&origin=germany 

我看到很多網站使用加號。

Angular可能無法獲取URL上的更改檢測，原因是逗號沒有被轉義（但這只是我所做的假設）。

至於傳遞多個參數的問題。那麼，沒有錯誤的方法。當涉及到查詢參數的結構時，沒有關於這個的強制規則。

你可以做URL的任何模式你想：

www.myApp.com/search?query=*&colour=blue&size=medium+large&origin=germany 
www.myApp.com/search?query=*&colour=blue&size=medium&size=large&origin=germany 
www.myApp.com/search?query=*&colour=blue&size[]=medium&size[]=large&origin=germany 
www.myApp.com/search?query=*&colour=blue&size[0]=medium&size[1]=large&origin=germany 

我個人的偏好是做什麼的更容易。如果您正在使用後端服務器。即使在前端，我也會遵循服務器所需的任何模式。這使得模式一致，但是如果後端不是問題。我只需要使用+並在需要時分割參數。