¿Cómo pasar argumentos de URL (cadena de consulta) a una solicitud HTTP en Angular?

Estoy creando una solicitud HTTP en Angular, pero no sé cómo agregarle argumentos de URL (cadena de consulta).

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

Ahora mi StaticSettings.BASE_URL es algo así como una url sin cadena de consulta como: http://atsomeplace.com/ pero quiero que sea http://atsomeplace.com/?var1=val1&var2=val2

¿Dónde caben var1 y var2 en mi objeto de solicitud Http? Quiero agregarlos como un objeto.

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

y luego solo el módulo Http hace el trabajo de analizarlo en una cadena de consulta de URL.

Los métodos HttpClient le permiten configurar los parámetros en sus opciones.

Puede configurarlo importando el HttpClientModule desde el paquete @ angular / common / http.

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

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

Después de eso, puede inyectar el HttpClient y usarlo para hacer la solicitud.

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 las versiones angulares anteriores a la versión 4, puede hacer lo mismo con Http servicio .

El método Http.get toma un objeto que implementa RequestOptionsArgs como segundo parámetro.

El campo de búsqueda de ese objeto se puede usar para establecer una cadena o un objeto URLSearchParams .

Un ejemplo:

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

La documentación para la clase Http tiene más detalles. Se puede encontrar aquí y un ejemplo de trabajo aquí .

Editar angular> = 4.3.x

HttpClient se ha introducido junto con HttpParams . Debajo de un ejemplo 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(...);

(Viejas respuestas)

Editar angular> = 4.x

requestOptions.searchha quedado en desuso Use en su requestOptions.paramslugar:

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

Respuesta original (angular 2)

Necesitas importar de la URLSearchParamssiguiente manera

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

Y luego construya sus parámetros y haga la solicitud http de la siguiente manera:

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

Version 5+

Con Angular 5 en adelante, NO tiene que usar HttpParams . Puede enviar directamente su objeto json como se muestra a continuación.

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

Tenga en cuenta que los valores de datos deben ser cadenas, es decir; { params: {limit: "2"}}

Versión 4.3.x +

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

Podría ayudar un poco!

Angular 6

Puede pasar los parámetros necesarios para recibir llamadas utilizando params:

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

donde x = {propiedad: "123"}.

En cuanto a la función api que registra "123":

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

Mi ejemplo

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

Mi metodo

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

en mi componente

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

Por cartero

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

En Angular 7/8 más reciente, puede usar el enfoque más simple: -

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

Si planea enviar más de un 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;
    });
}

Servicio

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

Y continúe con su solicitud http como lo hizo @ethemsulan.

Ruta del lado del 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
      });
    });
});

Puede usar HttpParams desde @ angular / common / http y pasar una cadena con la consulta. Por ejemplo:

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

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

Ahora en tu código

this.http.get(urlFull, options);

Y esto funciona para ti :)

Espero ayudarte

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

siempre que haya instalado jQuery , lo hago npm i jquery --savee incluyo apps.scriptsenangular-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);

Puede usar los parámetros de URL de la documentación oficial.

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