如何从Angular 5+中的对象创建带有查询参数的url字符串？

Question

我正在尝试从Angular 5 SPA中的对象创建URL。我的代码如下所示：

import { UrlTree, UrlSegmentGroup, DefaultUrlSerializer, UrlSegment } from "@angular/router";

const urlTree = new UrlTree();
urlTree.root = new UrlSegmentGroup([new UrlSegment("EndPoint", {})], {});
urlTree.queryParams = {
  "param1": param1Value,
  "param2": param2Value
};
const urlSerializer = new DefaultUrlSerializer();
const url = urlSerializer.serialize(urlTree);

它确实可以完成这项工作，但对于这样一项琐碎的工作，它似乎包括了可观的开销，我想知道是否存在一种更直接的方法来从对象获取url。

我的期望是简单一些：

const url = someSerializer.serialize("/segment1/segment2", { 
  "param1": param1Value,
  "param2": param2Value
})

问题：如何从Angular 5+中的对象创建带有查询参数的URL字符串？

Answer 1

您可以使用just Router和UrlSerializer：

constructor(private router: Router, private serializer: UrlSerializer) {
  const tree = router.createUrlTree([], { queryParams: { foo: 'a', bar: 42 } });
  console.log(serializer.serialize(tree)); // "/?foo=a&bar=42"
}

参见演示：https : //stackblitz.com/edit/angular-basic-template-3hx9at?file= src/app/ hello.component.ts

Answer 2

如果您已经拥有queryParams: Params，无论是通过自己构建对象还是从当前获取它route，您都可以简单地使用：

const queryParamsString = new HttpParams({ fromObject: queryParams }).toString();

queryParamsString 将会 param1=somevalue1&param2=somevalue2&...

?如果要将其附加到某个 URL，请不要忘记在其前面加上。

Answer 3

如果您最终想要浏览Angular的路由模块，则可以在queryParams中直接使用它。

let params = {
  param1: param1Value,
  param2: param2Value
};

this.router.navigate('/segment1/segment2', { queryParams: params });

对于静态网址：

let params = new HttpParams();
params = params.set('param1', param1Value);
params = params.set('param2', param2Value);

let URL = 'yourEndPoint/segment1/segment2?' + params.toString();

Answer 4

如果您想构建一个实用程序来从对象构造查询字符串，请尝试 Angular HttpParams：

// initialize from an object
const obj: any = {
  'number': 123,
  'string': 'lincoln',
  'empty': null,
  'bool': true,
  'array': ['1991', null, 'ramanujan'],
}
let httpParams = new HttpParams({ fromObject: obj })

// append manually
// do not forget to reassign
httpParams = httpParams.append('extra', 'gimme a chance')

console.log(httpParams.toString())

// number=123&string=lincoln&empty=null&bool=true&array=1991&array=null&array=ramanujan&extra=gimme%20a%20chance

请注意，HttpParams仅接受keyinstring和valuein string | string[]。因此，标记obj为在代码编辑器中any有效obj。另一个注意事项是，HttpParams将数组中的每个项目拆分为具有相同名称的单独参数，这可能不是您所期望的。

如果你更喜欢更“本土”的东西，URLSearchParams是一个候选人。HttpParams这个支持与like append、delete等几乎相同的方法。has语法稍微不那么冗长。object 中的每个值都会强制toString，因此数组仅产生一个参数，这与 中的行为相反HttpParams。

const obj: any = {
  number: 123,
  arr: [999, 'michael'],
  str: 'simp',
  empty1: null,
  empty2: undefined,
  canSleep: false,
}

const searchParams = new URLSearchParams(obj)

// no need to reassign after appending
searchParams.append('more', 'gimme one more kiss')

console.log(searchParams.toString())
// number=123&arr=999%2Cmichael&str=simp&empty1=null&empty2=undefined&canSleep=false&more=gimme+one+more+kiss

URLSearchParams大多数现代浏览器、Node.js 和 Web Workers 都支持。要在 IE 中使用它，请提供一个 polyfill。

Answer 5

您可以采用与 Angular HttpClient 相同的方法

const url = 'https://example.com'

const params = new HttpParams()
  .set('key1', 'Value 1')
  .set('key2', 'Value 2')

const request = new HttpRequest('GET', url, null, {params});

request.urlWithParams

这种方法的优点是 HttpParams 类处理参数的 URL 编码，而 HttpRequest 处理 URL 具有现有参数或仅具有“？”的情况 在最后。

Answer 6

尝试这样：

  let httpParams = new HttpParams().set('params1', String(id));
  httpParams = httpParams.set('params2', String(name));

  return this.httpClient.get<any>(this.BASE_URL, {
          params: httpParams
        });