多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 

我个人的偏好是做什么的更容易。如果您正在使用后端服务器。即使在前端，我也会遵循服务器所需的任何模式。这使得模式一致，但是如果后端不是问题。我只需要使用+并在需要时分割参数。