如何從 URL 獲取多個具有相同名稱但具有不同且唯一索引的參數？

Question

我正在開發 angular 應用程序，並且需要將 url 中的不同參數作為查詢參數傳遞。 但是我們需要基於 id 傳遞參數，例如：param[1]=23，這里 1 和 23 是動態的。 我已成功通過 url 中的參數，例如：

var myArrayQry = data.map(function(el) {
   return 'params[' + el.id + ']=' + el.quantity;
}).join('&')

我們最終的 url 就像：

http://example.com?params[1]=23&param[7]=26&params[4]=27

當我們想要獲取查詢參數時，我們使用了如下查詢參數：

this.route.queryParams.subscribe(res => {
   console.log(res)
})

將查詢參數返回為 object，我怎樣才能獲得這些參數？ 因為名稱是動態的。 有什么建議嗎？

我試過的：我試過JSON.stringify和getAll()方法，但沒有任何效果。

Answer 1

我認為不需要手動將查詢參數插入到 URL 中。 您可以利用 Angular 路由器的queryParams選項。

注意我還用Array#reduce替換了Array#map以從數組創建 object。 注意沒有重疊的id 。 如果是這樣，后一個值將覆蓋之前的值。

組件 1 (*.ts)

import { Router } from "@angular/router";

constructor(private router: Router) {}

queryParams = data.reduce((acc, curr) => {
  acc[curr.id] = curr.quantity;
  return acc;
}, Object.create(null));

this.router.navigate(["/example"], {queryParams: queryParams});

或者在模板中使用

組件 1 (*.html)

<button [routerLink]="['/example']" [queryParams]="queryParams">Click me</button>

並在組件 2 中獲取它。

組件 2 (*.ts)

import { ActivatedRouter } from "@angular/router";

constructor(private actRouter: Router) {}

ngOnInit() {
  this.actRouter.queryParams.subscribe(params => console.log(params));
}