如何将URL参数（查询字符串）传递给Angular上的HTTP请求？

Question

大家好我在Angular上创建HTTP请求，但我不知道如何添加url参数（查询字符串）。this.http.get(StaticSettings.BASE_URL).subscribe(  (response) => this.onGetForecastResult(response.json()),  (error) => this.onGetForecastError(error.json()),  () => this.onGetForecastComplete());现在我的StaticSettings.BASE_URL就像一个没有查询字符串的网址，如：http：//atsomeplace.com/ 但我希望它是http://atsomeplace.com/?var1=val1&var2=val2哪个var1和var2适合我的Http请求对象？我想像对象一样添加它们。{  query: {    var1: val1,    var2: val2  }}然后只是Http模块完成工作将其解析为URL查询字符串。

Answer 1

编辑角度> = 4.3.x.

HttpClient已与HttpParams一起推出。下面是一个使用示例：

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

（老答案）

编辑角度> = 4.x

requestOptions.search已被弃用。requestOptions.params改为使用：

let requestOptions = new RequestOptions();

requestOptions.params = params;

原始答案（Angular 2）

您需要导入URLSearchParams如下

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

然后构建您的参数并按如下方式生成http请求：

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

...

Answer 2

版本5+

使用Angular 5及更高版本，您不必使用HttpParams。您可以直接发送您的json对象，如下所示。

let data = {limit: "2"};

this.httpClient.get<any>(apiUrl, {params: data});

请注意，数据值应为字符串，即; { params: {limit: "2"}}

版本4.3.x +

使用来自@ angular / common / http的HttpParams，HttpClient

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

可能会帮助一些！