[angular] 각도 4 HttpClient 쿼리 매개 변수

나는 get()기능 에 대한 IntelliSense를 통해 그것을 찾았습니다 . 비슷한 정보를 찾는 사람을 위해 여기에 게시하겠습니다.

어쨌든 구문은 거의 동일하지만 약간 다릅니다. URLSearchParams()매개 변수 를 사용 하는 대신 초기화해야 HttpParams()하며 get()함수 내의 특성 이 이제 params대신 호출 됩니다 search.

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

getLogs(logNamespace): Observable<any> {

    // Setup log namespace query parameter
    let params = new HttpParams().set('logNamespace', logNamespace);

    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: params })
}

실제로이 구문은 조금 더 매개 변수에 관계없이 선호합니다. 또한 코드를 리팩토링하여 약간 더 간략하게 만들었습니다.

getLogs(logNamespace): Observable<any> {

    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, {
        params: new HttpParams().set('logNamespace', logNamespace)
    })
}

여러 매개 변수

지금까지 찾은 가장 좋은 방법은 정의 Params하려는 모든 매개 변수 를 사용하여 객체 를 정의하는 것입니다. 아래 주석에서 @estus가 지적 했듯이이 질문 에는 여러 매개 변수를 할당하는 방법에 대한 많은 대답 이 있습니다.

getLogs(parameters) {

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

    // Begin assigning parameters
    params = params.append('firstParameter', parameters.valueOne);
    params = params.append('secondParameter', parameters.valueTwo);

    // Make the API call using the new parameters.
    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: params })

조건부 논리가있는 다중 매개 변수

여러 매개 변수로 자주 수행하는 또 다른 작업은 모든 호출에서 해당 매개 변수가 없어도 여러 매개 변수를 사용할 수 있다는 것입니다. Lodash를 사용하면 API 호출에서 매개 변수를 조건부로 추가 / 제거하는 것이 매우 간단합니다. Lodash, Underscores 또는 vanilla JS에서 사용되는 정확한 기능은 응용 프로그램에 따라 다를 수 있지만 속성 정의를 확인하는 것이 효과적이라는 것을 알았습니다. 아래 함수는 함수에 전달 된 parameters 변수 내에 해당 속성이있는 매개 변수 만 전달합니다.

getLogs(parameters) {

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

    // Begin assigning parameters
    if (!_.isUndefined(parameters)) {
        params = _.isUndefined(parameters.valueOne) ? params : params.append('firstParameter', parameters.valueOne);
        params = _.isUndefined(parameters.valueTwo) ? params : params.append('secondParameter', parameters.valueTwo);
    }

    // Make the API call using the new parameters.
    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: params })

답변

    const params = new HttpParams({
      fromObject: {
        param1: 'value1',
        param2: 'value2',
      }
    });

    // http://localhost:3000/test?param1=value1&param2=value2

    const params = new HttpParams({
      fromString: `param1=${var1}&param2=${var2}`
    });

    //http://localhost:3000/test?paramvalue1=1&param2=value2

let param: any = {'userId': 2};
this.http.get(`${ApiUrl}`, {params: param})

this._Http.get(`${API_URL}/api/v1/data/logs`, {
    params: {
      logNamespace: logNamespace
    }
 })

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

export class ApiClass {

  constructor(private httpClient: HttpClient) {
    // use it like this in other services / components etc.
    this.getDataFromServer().
      then(res => {
        console.log('res: ', res);
      });
  }

  getDataFromServer() {
    const params = {
      param1: value1,
      param2: value2
    }
    const url = 'https://api.example.com/list'

    // { params: params } is the same as { params } 
    // look for es6 object literal to read more
    return this.httpClient.get(url, { params }).toPromise();
  }
}

this._Http.get(myUrlString, {params: {...myParamsObject}});

{
  firstParam: value1,
  secondParam, value2
}

for(let property in objectStoresParams) {
  if(objectStoresParams.hasOwnProperty(property) {
    params = params.append(property, objectStoresParams[property]);
  }
}