代码之家 › 专栏 › 技术社区 › Alexei - check Codidact

如何从Angular5+中的对象创建带有查询参数的URL字符串?

angular5 url angular

8

Alexei - check Codidact · 技术社区 · 8 年前

我正在尝试从一个角度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
})

问题: 如何从Angular5+中的对象创建带有查询参数的URL字符串?

4 回复 | 直到 8 年前

1

10

martin 8 年前

你可以只用 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

2

4

Prachi 8 年前

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();

3

0

Gobu CSG 8 年前

尝试如下操作:

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

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

4

-1

yer 8 年前

GetData(id) {

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

推荐文章

关于移动版

代码之家 - 一站式码农服务社区

沪ICP备11025650号