如何在HttpClient "get“方法中传递URLSearchParams - Angular 5

Question

我将Angular 4.2与Http服务结合使用，并使用如下get方法，其中params是一个URLSearchParams对象：

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

我想迁移到Angular 5。http现在是一个HttpClient对象，就像angular团队推荐的那样。我得到了一个‘搜索’键错误。

你知道如何将Http迁移到我的HttpClient服务吗？

谢谢。

Answer 1

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

Answer 2

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

Answer 3

以下是您需要做的更改：

• 将旧的Http导入替换为：

从"@angular/common/http";

• Create HttpClient对象导入{ HttpClient }，如下所示：

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

目前实现搜索参数的方法有如下几种：

public get(searchParam: string)：Observable { return 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);
}