Angular 6 router.navigate() queryParams 解析器

Question

我在使用 Angular 6 开发应用程序时遇到了一个问题。在将对象作为queryParams: { prop: value}的属性值传递时，内置函数将对象转换为字符串，我在 js 中得到了一个通常的[object Object] 。

我想要做的是：我有一个查询字符串，用于向我的服务器发送请求。 我现在想用它来更新当前路线的查询参数。 使用 npm-qs lib 字符串化的查询字符串示例：

?priceRange[min]=1&priceRange[max] = 2

让我们看一下我用同一个库解析的对象，回到一个对象：

priceRange: {min: "1", max: "2"}

什么queryParams将其转换为：

priceRange=%5Bobject%20Object%5D

为此，我将其解析回一个适当的对象，然后，我使用发布在此处某处的方法：

constructor(
  private readonly router: Router,
  private readonly activatedRoute: ActivatedRoute,
) {}

updateQueryParams() {
  this.router.navigate([], {
    relativeTo: this.activatedRoute,
    queryParams: {
      priceRange: {min: "1", max: "2"} (hardcoded this to simplify example)
    }
 });
}

使用上面的代码，我正在尝试：

1. 停留在同一页面（ []和relativeTo: this.activatedRoute ，据我所知使我停留在同一页面）；

2. 将网址更改为.com/?priceRange[min]=1&priceRange[max]=2 （或类似的东西）

我在问，有没有办法在 queryParams 中使用对象作为值，或者有什么建议吗？ 我已经阅读了 angular.io 文档，没有关于这种情况的内容，只是param1=q & param2=w简单示例，实际上在几个堆栈帖子中是相同的。 也许我可以以某种方式使用 Angular 方式将查询字符串传递给我的 url？ （不使用router.navigate()方法的那些queryParams ）。

提前致谢！

Answer 1

我也得到了这个%5Bobject%20Object%5D但后来我明白了原因。 这是因为查询参数需要作为第二个参数传递。

如下所示：

this.router.navigate(["/enter-url"], { 
  queryParams: { 
    priceRange: {
      min: "1",
      max: "2"
    }
  } 
});