我想从一个Angular组件触发HTTP请求,但我不知道如何向它添加URL参数(查询字符串)。

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

现在是我的静态设置。BASE_URL就像一个没有查询字符串的URL: http://atsomeplace.com/,但我想让它像http://atsomeplace.com/?var1=val1&var2=val2

如何添加var1,和var2到我的HTTP请求对象作为对象?

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

然后只有HTTP模块将其解析为URL查询字符串。


当前回答

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

如果你已经安装了jQuery,我做npm I jQuery—保存并包含在应用程序中。angular-cli.json中的脚本

其他回答

您可以使用官方文档中的Url参数。

操作:这个httpClient。得到(这个。火,(params: new HttpParams()。集合(“noCover”,noCover)

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

如果你已经安装了jQuery,我做npm I jQuery—保存并包含在应用程序中。angular-cli.json中的脚本

在最新的Angular 7/8中,你可以使用最简单的方法:-

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

角6

你可以通过使用params传入get调用所需的参数:

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

其中x = {property: "123"}。

对于记录“123”的api函数:

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