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