如何在 HttpClient“get”方法中传递 URLSearchParams - Angular 5答案

【问题标题】：How to pass URLSearchParams in the HttpClient "get" method - Angular 5如何在 HttpClient“get”方法中传递 URLSearchParams - Angular 5
【发布时间】：2018-05-13 02:00:44
【问题描述】：

我将 Angular 4.2 与 Http 服务一起使用，并使用了这样的 get 方法，其中 params 是 URLSearchParams 对象：

this.http.get(url, {headers: this.setHeaders(), search: params})

我想迁移到 Angular 5。 http 现在是 Angular 团队推荐的 HttpClient 对象。我的“搜索”键出错。

您知道在我的情况下如何将 Http 迁移到 HttpClient 服务吗？

谢谢。

【问题讨论】：

标签： angular typescript http angular5 httpclient

【解决方案1】：

Angular 4 方式：

this.http.get(url, {headers: this.setHeaders(), search: params})

Angular 5 方式：

import { HttpClient, HttpParams } from '@angular/common/http';
let params = new HttpParams().set('paramName', paramValue);
this.http.get(url,  { params: params })

多个参数：

// Initialize Params Object
let Params = new HttpParams();

// Begin assigning parameters
Params = Params.append('firstParameter', firstVal);
Params = Params.append('secondParameter', secondVal);

【讨论】：

【解决方案2】：

从 Angular 4.3 开始，您可以像这样使用HttpClient：

import { HttpClient,HttpHeaders, HttpParams } from '@angular/common/http';

   constructor(private httpClient: HttpClient) { }    

   getData(){
        let headers = new HttpHeaders();
        headers  = headers.append('header-1', 'value-1');
        headers  = headers.append('header-2', 'value-2');

       let params = new HttpParams();
       params = params.append('param-1', 'value-1');
       params = params.append('param-2', 'value-2');

       this.httpClient.get("/data", {headers , params })
   }

HttpParams 和 HttpHeaders 是不可变类，因此在每次调用 set 或 append 方法后，它们都会返回一个新实例，这就是您应该这样做的原因：params = params.append(...)

【讨论】：

【解决方案3】：

以下将是更改，您需要做的：

将旧的 Http 导入替换为：

从“@angular/common/http”导入 { HttpClient }；
如下创建HttpClient对象：

构造函数( 受保护的httpClient：HttpClient， ) {}

现在有几种方法可以实现搜索参数，如下：

public get(searchParam: string): Observable { 返回 this.httpClient.get(${this.URL}/${searchParam}); }

或：

public get(searchParam: string): Observable<object> {
let headers = new Headers({ 'Content-Type': 'application/json' });
    let myParams = HttpParams().set("id", searchParam);

    let options = new RequestOptions({ headers: headers, method: 'get', params: myParams });

return this.http.get("this.url",options)
         .map((res: Response) => res.json())
         .catch(this.handleError);
}

【讨论】：

【解决方案4】：

我遇到过需要将多个参数传递给 api 的情况。唯一对我有用的是在 HttpParams 对象初始化期间在同一行中调用 set() 方法时链接在一起：

public get(userid: string, username: string): Observable<object> {
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let myParams = HttpParams().set("id", userid).set("username", username);
    let options = new RequestOptions({ headers: headers, method: 'get', params: 
myParams });

【讨论】：

【解决方案5】：

HttpParams 有两个方法 set(string, string) & append(string, string)。

set is clear - doc：替换参数的值：

let httpParams = new HttpParams();
httpParams = httpParams.set('page', '0');
httpParams = httpParams.set('page', '1');

// httpParams.toString() -> 'page=1'

appned - doc 对我来说具有误导性：将新值附加到参数的现有值。

所以我希望该文档：

let httpParams = new HttpParams();
httpParams = httpParams.add('page', '0');
httpParams = httpParams.add('page', '1');

// httpParams.toString() -> 'page=1,2'

但实际（角度 11.2.14）行为是：

let httpParams = new HttpParams();
httpParams = httpParams.add('page', '0');
httpParams = httpParams.add('page', '1');

// httpParams.toString() -> 'page=1&page=2'

但我仍然需要有不同的变体：

page=0&size=10 - 可通过httpParams set 方法解决
sort=id,asc&sort=statusId,desc - 可通过httpParams add 方法解决
search=id>100,id<500,statusId:3 - 需要手动解决

【讨论】：