Как создать строку URL с параметрами запроса из объекта в Angular 5+?

Question

Я пытаюсь создать URL из объекта в Angular 5 SPA. Мой код выглядит следующим образом:

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
})

Вопрос: Как создать строку URL с параметрами запроса из объекта в Angular 5 +?

Answer 1

Попробуй так:

  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 2

Вы можете создать URL при вызове api для получения таких данных:

GetData(id) {

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

Answer 3

Вы можете использовать только 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 4

Вы можете напрямую использовать его в queryParams, если в конечном итоге хотите перейти через модуль маршрутизации Angular.

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

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

Для статических URL:

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

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