Como passar argumentos de URL (string de consulta) para uma solicitação HTTP no Angular?

Estou criando uma solicitação HTTP no Angular, mas não sei como adicionar argumentos de URL (string de consulta) a ele.

this.http.get(StaticSettings.BASE_URL).subscribe(
  (response) => this.onGetForecastResult(response.json()),
  (error) => this.onGetForecastError(error.json()),
  () => this.onGetForecastComplete()
);

Agora, meu StaticSettings.BASE_URL é algo como um URL sem string de consulta como: http://atsomeplace.com/, mas eu quero que seja http://atsomeplace.com/?var1=val1&var2=val2

Onde var1 e var2 se encaixam no meu objeto de solicitação Http? Eu quero adicioná-los como um objeto.

{
  query: {
    var1: val1,
    var2: val2
  }
}

e, em seguida, apenas o módulo Http faz o trabalho para analisá-lo na string de consulta da URL.

Os métodos HttpClient permitem definir os parâmetros nas opções.

Você pode configurá-lo importando o HttpClientModule do pacote @ angular / common / http.

import {HttpClientModule} from '@angular/common/http';

@NgModule({
  imports: [ BrowserModule, HttpClientModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Depois disso, você pode injetar o HttpClient e usá-lo para fazer a solicitação.

import {HttpClient} from '@angular/common/http'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name:string;
  constructor(private httpClient: HttpClient) {
    this.httpClient.get('/url', {
      params: {
        appid: 'id1234',
        cnt: '5'
      },
      observe: 'response'
    })
    .toPromise()
    .then(response => {
      console.log(response);
    })
    .catch(console.log);
  }
}

Para versões angulares anteriores à versão 4, você pode fazer o mesmo usando o serviço Http .

O método Http.get usa um objeto que implementa RequestOptionsArgs como um segundo parâmetro.

O campo de pesquisa desse objeto pode ser usado para definir uma string ou um objeto URLSearchParams .

Um exemplo:

 // Parameters obj-
 let params: URLSearchParams = new URLSearchParams();
 params.set('appid', StaticSettings.API_KEY);
 params.set('cnt', days.toString());

 //Http request-
 return this.http.get(StaticSettings.BASE_URL, {
   search: params
 }).subscribe(
   (response) => this.onGetForecastResult(response.json()), 
   (error) => this.onGetForecastError(error.json()), 
   () => this.onGetForecastComplete()
 );

A documentação para a classe Http tem mais detalhes. Pode ser encontrado aqui e um exemplo de trabalho aqui .

Editar Angular> = 4.3.x

HttpClient foi introduzido junto com HttpParams . Abaixo um exemplo de uso:

import { HttpParams, HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) { }

let params = new HttpParams();
params = params.append('var1', val1);
params = params.append('var2', val2);

this.http.get(StaticSettings.BASE_URL, {params: params}).subscribe(...);

(Respostas antigas)

Editar Angular> = 4.x

requestOptions.searchfoi descontinuado. Use em requestOptions.paramsvez disso:

let requestOptions = new RequestOptions();
requestOptions.params = params;

Resposta original (Angular 2)

Você precisa importar URLSearchParamscomo abaixo

import { Http, RequestOptions, URLSearchParams } from '@angular/http';

E, em seguida, crie seus parâmetros e faça a solicitação http da seguinte maneira:

let params: URLSearchParams = new URLSearchParams();
params.set('var1', val1);
params.set('var2', val2);

let requestOptions = new RequestOptions();
requestOptions.search = params;

this.http.get(StaticSettings.BASE_URL, requestOptions)
    .toPromise()
    .then(response => response.json())
...

Versão 5+

Com o Angular 5 e versões posteriores , você NÃO precisa usar HttpParams . Você pode enviar diretamente seu objeto json, como mostrado abaixo.

let data = {limit: "2"};
this.httpClient.get<any>(apiUrl, {params: data});

Observe que os valores dos dados devem ser string, ou seja; { params: {limit: "2"}}

Versão 4.3.x +

Use HttpParams, HttpClient de @ angular / common / http

import { HttpParams, HttpClient } from '@angular/common/http';
...
constructor(private httpClient: HttpClient) { ... }
...
let params = new HttpParams();
params = params.append("page", 1);
....
this.httpClient.get<any>(apiUrl, {params: params});

Pode ajudar alguns!

Angular 6

Você pode passar os parâmetros necessários para receber chamadas usando params:

this.httpClient.get<any>(url, { params: x });

onde x = {propriedade: "123"}.

Quanto à função api que registra "123":

router.get('/example', (req, res) => {
    console.log(req.query.property);
})

Meu exemplo

private options = new RequestOptions({headers: new Headers({'Content-Type': 'application/json'})});

Meu método

  getUserByName(name: string): Observable<MyObject[]> {
    //set request params
    let params: URLSearchParams = new URLSearchParams();
    params.set("name", name);
    //params.set("surname", surname); for more params
    this.options.search = params;

    let url = "http://localhost:8080/test/user/";
    console.log("url: ", url);

    return this.http.get(url, this.options)
      .map((resp: Response) => resp.json() as MyObject[])
      .catch(this.handleError);
  }

  private handleError(err) {
    console.log(err);
    return Observable.throw(err || 'Server error');
  }

no meu componente

  userList: User[] = [];
  this.userService.getUserByName(this.userName).subscribe(users => {
      this.userList = users;
    });

Por carteiro

http://localhost:8080/test/user/?name=Ethem

No mais recente Angular 7/8, você pode usar a abordagem mais simples: -

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

getDetails(searchParams) {
    const httpOptions = {
        headers: { 'Content-Type': 'application/json' },
        params: { ...searchParams}
    };
    return this.http.get(this.Url, httpOptions);
}

Se você planeja enviar mais de um parâmetro.

Componente

private options = {
  sort:   '-id',
  select: null,
  limit:  1000,
  skip:   0,
  from:   null,
  to:     null
};

constructor(private service: Service) { }

ngOnInit() {
  this.service.getAllItems(this.options)
    .subscribe((item: Item[]) => {
      this.item = item;
    });
}

Serviço

private options = new RequestOptions({headers: new Headers({'Content-Type': 'application/json'})});
constructor(private http: Http) { }

getAllItems(query: any) {
  let params: URLSearchParams = new URLSearchParams();
  for(let key in query){
    params.set(key.toString(), query[key]);
  }
  this.options.search = params;
  this.header = this.headers();

E continue com sua solicitação http, exatamente como @ethemsulan.

Rota do lado do servidor

router.get('/api/items', (req, res) => {
  let q = {};
  let skip = req.query.skip;
  let limit = req.query.limit;
  let sort  = req.query.sort;
  q.from = req.query.from;
  q.to = req.query.to;

  Items.find(q)
    .skip(skip)
    .limit(limit)
    .sort(sort)
    .exec((err, items) => {
      if(err) {
        return res.status(500).json({
          title: "An error occurred",
          error: err
        });
      }
      res.status(200).json({
        message: "Success",
        obj:  items
      });
    });
});

Você pode usar HttpParams de @ angular / common / http e passar uma string com a consulta. Por exemplo:

import { HttpClient, HttpParams } from '@angular/common/http';
const query = 'key=value' // date=2020-03-06

const options = {
  params: new HttpParams({
    fromString: query
  })
}

Agora no seu código

this.http.get(urlFull, options);

E isso funciona para você :)

Eu espero te ajudar

import ...
declare var $:any;
...
getSomeEndPoint(params:any): Observable<any[]> {
    var qStr = $.param(params); //<---YOUR GUY
    return this._http.get(this._adUrl+"?"+qStr)
      .map((response: Response) => <any[]> response.json())
      .catch(this.handleError);
}

desde que você tenha instalado o jQuery , eu o npm i jquery --saveincluo apps.scriptsnoangular-cli.json

import { Http, Response } from '@angular/http';
constructor(private _http: Http, private router: Router) {
}

return this._http.get('http://url/login/' + email + '/' + password)
       .map((res: Response) => {
           return res.json();
        }).catch(this._handleError);

Você pode usar parâmetros de URL na documentação oficial.

Exemplo: this.httpClient.get(this.API, { params: new HttpParams().set('noCover', noCover) })