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

您只能使用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

如果您最终想要浏览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 3

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

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

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

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

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 只接受 key 中的 string 和 value 中的 string | string[]。因此，将 obj 标记为 any 使 obj 在代码编辑器中有效。另一个注意事项是 HttpParams 将数组中的每个项目拆分为具有相同名称的单独参数，这可能不是您所期望的。

如果您更喜欢更“原生”的东西，URLSearchParams 是一个候选。这个支持在 HttpParams 中几乎相同的方法，如 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

大多数现代浏览器、Node.js 和 Web Workers 都支持

URLSearchParams。要在 IE 中使用它，请provide a 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
        });

Answer 7

您可以在调用api时构造一个url来获取数据，如下所示：

GetData(id) {

    this.http.get<User>('http://test.com' + id + '/users')
      .subscribe(data => {
        console.log(data)
      });
}

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

7 个答案: