Angular的get传递多参数问题

最新推荐文章于 2021-08-05 23:23:06 发布

小朱小先生

最新推荐文章于 2021-08-05 23:23:06 发布

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

文章标签： Angular HttpClient get

本文链接：https://blog.youkuaiyun.com/QiZi_Zpl/article/details/79740553

本文介绍Angular5中HttpClient模块的使用技巧，特别是如何通过HTTP请求传递复杂参数。演示了一种将自定义对象转换为JSON格式的方法，以便于作为查询字符串进行传输。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

楼主在自学Angular5的时候发现，新版的Angular已经丢弃http的形式改用Httpclient。但是在demo中发送http.get请求并传递多参数的时候发现，参数params如果是HttpParams类型的话，只能传递单参数，传递多参数要么被覆盖要么无法传递（不清楚是我自己代码问题还是啥），后面查看client.ds.ts中对params的声明，发现params除了可以传递HttpParams外，还可以直接传递JSON或者string类型。所以，楼主就自己简单了写了一个实现JSON传输的方法，可支持单复参数。

export class ProductSearchParames {
  constructor(
    public title: string,
    public price: number,
    public category: string
  ) {
  }
}

  public encodeParams(params: ProductSearchParames) {
    return Object.keys(params)
      .filter(key => params[key])
      .reduce((json: any, key: string) => {
        json[key] = params[key];
        return json;
      }, []);
  }

  search(params: ProductSearchParames): Observable<any> {
    return this.http.get('/api/products', {params: this.encodeParams(params)});
  }

在本地测试，可以正常传输参数，并且后台亦可正常接收