web-dev-qa-db-fra.com

Comment créer une chaîne d'URL avec les paramètres de requête d'un objet dans Angular 5+?

J'essaie de créer une URL à partir d'un objet situé dans un Angular 5 SPA. Mon code ressemble à ceci:

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

Il fait le travail, mais il semble inclure des frais généraux importants pour un travail aussi trivial et je me demande s’il existe une méthode plus simple pour obtenir l’URL de l’objet.

Mon attente est d'avoir quelque chose de simple comme:

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

Question: Comment créer une chaîne d'URL avec les paramètres de requête d'un objet dans Angular 5+?

angularurlangular5
4
Alexei

Vous pouvez simplement utiliser Router et 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"
}

Voir la démo: https://stackblitz.com/edit/angular-basic-template-3hx9at?file=src/app/hello.component.ts

3
martin

Vous pouvez directement l'utiliser dans la requête Params si vous souhaitez naviguer dans le module de routage angulaire.

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

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

Pour les URL statiques:

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

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

Vous pouvez construire une URL en appelant api pour récupérer des données comme ceci:

GetData(id) {

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

Essayez comme ça:

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

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