我想从一个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查询字符串。


当前回答

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

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

其他回答

在最新的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);
}

HttpClient方法允许你在它的选项中设置参数。

你可以通过从@angular/common/http包中导入HttpClientModule来配置它。

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

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

之后,您可以注入HttpClient并使用它来执行请求。

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

对于版本4之前的angular版本,你可以使用Http服务做同样的事情。

Http。get方法接受一个实现RequestOptionsArgs的对象作为第二个参数。

该对象的搜索字段可用于设置字符串或URLSearchParams对象。

一个例子:

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

Http类的文档有更多详细信息。在这里可以找到它,在这里可以找到一个工作示例。

编辑Angular >= 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(...);

(老答案)

编辑Angular >= 4.x

requestOptions。搜索已弃用。requestOptions使用。改为参数:

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

我的例子

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

我的方法

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

在我的分量中

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

由邮递员

http://localhost:8080/test/user/?name=Ethem
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中的脚本