时间戳

首页 > 解决方案 > Angular 6 router.navigate() queryParams 解析器

javascript - Angular 6 router.navigate() queryParams 解析器

问题描述

我在使用 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？（不使用那些queryParams方法router.navigate()）。

提前致谢！

标签： javascriptangulartypescriptangular6

解决方案

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

如下所示：

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

推荐阅读