Question

我正在开发一个 angular 应用程序，需要将 url 中的不同参数作为查询参数传递。但是我们需要基于 id 传递参数，例如：param[1]=23，这里 1 和 23 是动态的。我已经成功传递了 url 中的参数，例如：

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

我们的最终网址就像：

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

当我们想要获取查询参数时，我们使用了如下查询参数：

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

将查询参数作为对象返回，我如何获取这些参数？因为名字是动态的。有什么建议吗？

我尝试过的：我尝试过 JSON.stringify 和 getAll() 方法，但没有任何效果。

Answer 1

我认为不需要手动将查询参数插入到 URL 中。您可以利用 Angular Router 的 queryParams 选项。

注意我还用 Array#map 替换了 Array#reduce 以从数组创建一个对象。注意没有重叠的 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));
}

如何从 URL 获取多个具有相同名称但具有不同且唯一索引的参数？

1 个答案: