Question

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

我正在尝试做的事情：我有一个查询字符串，用于将请求发送到服务器。我现在想使用它来更新当前路由的查询参数。用npm-qs lib字符串化的我的查询字符串的示例：

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

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

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)
    }
 });
}

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

停留在同一页面上（[]和relativeTo: this.activatedRoute一起使我停留在同一页面上）；
将网址更改为.com/?priceRange[min]=1&priceRange[max]=2（或类似名称）

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

谢谢！

Answer 1

我也得到了这个set().pipe( switchMap( res1 => read(res1), switchMap(res2 => go(res2)) .subscribe();，但后来我明白了原因。这是因为查询参数需要作为第二个参数传递。

如下所示：

%5Bobject%20Object%5D

Angular 6 router.navigate（）queryParams解析器

1 个答案: