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

Http类的文档有更多细节.它可以发现这里和工作的例子在这里.

编辑角度> = 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())
...

版本5+

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

let data = {limit: "2"};
this.httpClient.get(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(apiUrl, {params: params});

可能会帮助一些!

Angular 6

您可以使用params传入get调用所需的参数:

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

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

至于记录"123"的api函数:

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

我的例子

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

我的方法

  getUserByName(name: string): Observable {
    //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

如果您打算发送多个参数.

零件

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

服务

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

并继续你的http请求@ethemsulan如何做.

服务器端路由

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