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

mik*_*ike 20 http httpclient angular angular5

我使用Angular 4.2Http服务,我使用了这样的get方法,其中params是一个URLSearchParams对象:

this.http.get(url, {headers: this.setHeaders(), search: params})
Run Code Online (Sandbox Code Playgroud)

我想迁移到Angular 5.http现在是一个像角度团队推荐的HttpClient对象.我的'搜索'键出错了.

你知道如何在我的案例中将Http迁移到HttpClient服务吗?

谢谢.

Bou*_*ine 50

从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 })
   }
Run Code Online (Sandbox Code Playgroud)

HttpParams并且HttpHeaders是不可变类,所以在每次调用setappend方法之后,它们返回一个新实例,这就是你应该这样做的原因:params = params.append(...)


小智 7

Angular 4方式:

this.http.get(url, {headers: this.setHeaders(), search: params})
Run Code Online (Sandbox Code Playgroud)

Angular 5方式:

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

多个参数:

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

// Begin assigning parameters
Params = Params.append('firstParameter', firstVal);
Params = Params.append('secondParameter', secondVal);
Run Code Online (Sandbox Code Playgroud)