Angular 4.3-HttpClient 설정 매개 변수

Question 1

let httpParams = new HttpParams().set('aaa', '111');
httpParams.set('bbb', '222');

왜 이것이 작동하지 않습니까? 'aaa'만 설정하고 'bbb'는 설정하지 않습니다.

또한 개체가 있습니다 {aaa : 111, bbb : 222} 반복하지 않고 모든 값을 설정하려면 어떻게해야합니까?

업데이트 (이것은 작동하는 것 같지만 루프를 어떻게 피할 수 있습니까?)

let httpParams = new HttpParams();
Object.keys(data).forEach(function (key) {
     httpParams = httpParams.append(key, data[key]);
});

Question 2

5.0.0-beta.6 이전

let httpParams = new HttpParams();
Object.keys(data).forEach(function (key) {
     httpParams = httpParams.append(key, data[key]);
});

5.0.0-beta.6 이후

5.0.0-beta.6 (2017-09-03) 이후 새 기능 추가 (HttpClient 헤더 및 매개 변수에 대한 개체 맵 허용)

앞으로 개체는 HttpParams 대신 직접 전달할 수 있습니다.

getCountries(data: any) {
    // We don't need any more these lines
    // let httpParams = new HttpParams();
    // Object.keys(data).forEach(function (key) {
    //     httpParams = httpParams.append(key, data[key]);
    // });

    return this.httpClient.get("/api/countries", {params: data})
}

Question 3

HttpParams는 변경 불가능합니다. set및 append방법은 기존 인스턴스를 수정하지 않습니다. 대신 변경 사항이 적용된 새 인스턴스를 반환합니다.

let params = new HttpParams().set('aaa', 'A');    // now it has aaa
params = params.set('bbb', 'B');                  // now it has both

이 접근 방식은 메서드 체인과 함께 잘 작동합니다.

const params = new HttpParams()
  .set('one', '1')
  .set('two', '2');

... 조건으로 포장해야하는 경우 어색 할 수 있지만.

반환 된 새 인스턴스에 대한 참조를 가져 오기 때문에 루프가 작동합니다. 작동하지 않는 게시 한 코드는 작동하지 않습니다. set () 만 호출하지만 결과를 가져 오지 않습니다.

let httpParams = new HttpParams().set('aaa', '111'); // now it has aaa
httpParams.set('bbb', '222');                        // result has both but is discarded

Question 4

최신 버전 @angular/common/http(5.0 이상, 모양으로 볼 때)에서는의 fromObject키를 사용 HttpParamsOptions하여 객체를 바로 전달할 수 있습니다 .

let httpParams = new HttpParams({ fromObject: { aaa: 111, bbb: 222 } });

이것은 단지 후드 아래에서forEach 루프를 실행합니다 .

this.map = new Map<string, string[]>();
Object.keys(options.fromObject).forEach(key => {
  const value = (options.fromObject as any)[key];
  this.map !.set(key, Array.isArray(value) ? value : [value]);
});

Question 5

저에게는 체인 set방식이 가장 깨끗한 방법입니다.

const params = new HttpParams()
.set('aaa', '111')
.set('bbb', "222");

Question 6

몇 가지 쉬운 대안

`HttpParams`개체를 사용하지 않고

let body = {
   params : {
    'email' : emailId,
    'password' : password
   }
}

this.http.post(url, body);

`HttpParams`개체 사용

let body = new HttpParams({
  fromObject : {
    'email' : emailId,
    'password' : password
  }
})

this.http.post(url, body);

Question 7

이를 수행하는 또 다른 옵션은 다음과 같습니다.

this.httpClient.get('path', {
    params: Object.entries(data).reduce(
    (params, [key, value]) => params.set(key, value), new HttpParams());
});

Question 8

HTTP Params 클래스는 불변이므로 set 메서드를 연결해야합니다.

const params = new HttpParams()
.set('aaa', '111')
.set('bbb', "222");

Question 9

이것을 사용하면 루프를 피할 수 있습니다.

// obj is the params object with key-value pair. 
// This is how you convert that to HttpParams and pass this to GET API. 

const params = Object.getOwnPropertyNames(obj)
               .reduce((p, key) => p.set(key, obj[key]), new HttpParams());

또한 일반적으로 사용되는 서비스에서 toHttpParams 기능을 만드는 것이 좋습니다 . 따라서 함수를 호출하여 객체를 HttpParams 로 변환 할 수 있습니다 .

/**
 * Convert Object to HttpParams
 * @param {Object} obj
 * @returns {HttpParams}
 */
toHttpParams(obj: Object): HttpParams {
    return Object.getOwnPropertyNames(obj)
        .reduce((p, key) => p.set(key, obj[key]), new HttpParams());
}

최신 정보:

5.0.0-beta.6 (2017-09-03)부터 새로운 기능을 추가 했습니다 (HttpClient 헤더 및 매개 변수에 대한 개체 맵 허용 ).

앞으로 개체는 HttpParams 대신 직접 전달할 수 있습니다.

이것은 위에서 언급 한 toHttpParams 와 같은 하나의 공통 함수를 사용한 경우 쉽게 제거하거나 필요한 경우 변경할 수 있는 또 다른 이유 입니다.

Question 10

https://github.com/angular/angular/blob/master/packages/common/http/src/params.ts 의 구현에서 볼 수있는 한

값을 별도로 제공해야합니다. 루프를 피할 수 없습니다.

문자열을 매개 변수로 사용하는 생성자도 있지만 형식이 param=value&param2=value2있으므로 거래가 없습니다 (두 경우 모두 객체 루프를 완료합니다).

angular에 언제든지 문제 / 기능 요청을보고 할 수 있습니다. https://github.com/angular/angular/issues

추신 : set및 append방법의 차이점에 대해 기억하십시오 ;)

Question 11

@MaciejTreder가 우리가 반복해야한다는 것을 확인 했으므로, 여기에 기본 매개 변수 세트에 추가 할 수있는 래퍼가 있습니다.

function genParams(params: object, httpParams = new HttpParams()): object {
    Object.keys(params)
        .filter(key => {
            let v = params[key];
            return (Array.isArray(v) || typeof v === 'string') ? 
                (v.length > 0) : 
                (v !== null && v !== undefined);
        })
        .forEach(key => {
            httpParams = httpParams.set(key, params[key]);
        });
    return { params: httpParams };
}

다음과 같이 사용할 수 있습니다.

const OPTIONS = {
    headers: new HttpHeaders({
        'Content-Type': 'application/json'
    }),
    params: new HttpParams().set('verbose', 'true')
};
let opts = Object.assign({}, OPTIONS, genParams({ id: 1 }, OPTIONS.params));
this.http.get(BASE_URL, opts); // --> ...?verbose=true&id=1

Question 12

복잡한 dto 개체 ( "문자열 사전"뿐만 아니라)를 HttpParams로 변환하는 내 도우미 클래스 (ts) :

import { HttpParams } from "@angular/common/http";

export class HttpHelper {
  static toHttpParams(obj: any): HttpParams {
    return this.addToHttpParams(new HttpParams(), obj, null);
  }

  private static addToHttpParams(params: HttpParams, obj: any, prefix: string): HttpParams {    
    for (const p in obj) {
      if (obj.hasOwnProperty(p)) {
        var k = p;
        if (prefix) {
          if (p.match(/^-{0,1}\d+$/)) {
            k = prefix + "[" + p + "]";
          } else {
            k = prefix + "." + p;
          }
        }        
        var v = obj[p];
        if (v !== null && typeof v === "object" && !(v instanceof Date)) {
          params = this.addToHttpParams(params, v, k);
        } else if (v !== undefined) {
          if (v instanceof Date) {
            params = params.set(k, (v as Date).toISOString()); //serialize date as you want
          }
          else {
            params = params.set(k, v);
          }

        }
      }
    }
    return params;
  }
}

console.info(
  HttpHelper.toHttpParams({
    id: 10,
    date: new Date(),
    states: [1, 3],
    child: {
      code: "111"
    }
  }).toString()
); // id=10&date=2019-08-02T13:19:09.014Z&states%5B0%5D=1&states%5B1%5D=3&child.code=111

Question 13

예를 들어 동일한 키 이름으로 여러 매개 변수를 추가하려는 경우 추가하고 싶었습니다. www.test.com/home?id=1&id=2

let params = new HttpParams();
params = params.append(key, value);

추가를 사용하면 set을 사용하면 이전 값을 동일한 키 이름으로 덮어 씁니다.

Question 14

이 솔루션은 저에게 효과적입니다.

let params = new HttpParams(); Object.keys(data).forEach(p => { params = params.append(p.toString(), data[p].toString()); });