HttpClient "get" 메서드에서 URL 검색 매개 변수를 전달하는 방법 - Angular 5

HttpClient "get" 메서드에서 URL 검색 매개 변수를 전달하는 방법 - Angular 5

Http 서비스와 함께 Angular 4.2를 사용했고 params가 URLsearchParams 객체인 get 메서드를 사용했습니다.

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

Angular 5로 마이그레이션하고 싶습니다. http는 이제 Angular 팀에서 추천하는 HttpClient 개체입니다.'검색' 키에 오류가 발생했습니다.

제 경우 Http를 HttpClient 서비스로 마이그레이션하는 방법을 알고 계십니까?

감사해요.

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

각도 4방향:

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

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

다음과 같은 변경 사항을 수행해야 합니다.

• 이전 Http 가져오기를 다음으로 바꾸기:

  "@angular/common/http"에서 {HttpClient}을(를) 가져옵니다.

• 다음과 같이 HttpClient 개체를 만듭니다.

  생성자(보호된 httpClient:HttpClient, ) {}

  이제 다음과 같은 검색 매개 변수를 얻을 수 있는 방법이 있습니다.

  public get(searchParam: 문자열):관찰 가능한 {이 .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);
}

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

HttpParams에는 두 가지 메서드 집합(문자열, 문자열)과 추가(문자열, 문자열)가 있습니다.

• set is clear - doc: 매개 변수 값을 바꿉니다.

  let httpParams = new HttpParams();
  httpParams = httpParams.set('page', '0');
  httpParams = httpParams.set('page', '1');
  
  // httpParams.toString() -> 'page=1'
  

• appended - doc is missleading for me: 매개 변수의 기존 값에 새 값을 추가합니다.

  그래서 나는 그 의사에게 기대합니다:

  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'
  

하지만 여전히 다양한 변형이 필요합니다.

1. page=0&size=10로 해결할 수 있는.httpParams set방법
2. sort=id,asc&sort=statusId,desc로 해결할 수 있는.httpParams add방법
3. search=id>100,id<500,statusId:3수동으로 해결해야 합니다.

언급URL : https://stackoverflow.com/questions/47551458/how-to-pass-urlsearchparams-in-the-httpclient-get-method-angular-5