Angular의 HTTP 요청에 URL 인수 (쿼리 문자열)를 전달하는 방법은 무엇입니까?

Angular에서 HTTP 요청을 작성하고 있지만 URL 인수 (쿼리 문자열)를 추가하는 방법을 모르겠습니다.

this.http.get(StaticSettings.BASE_URL).subscribe(
  (response) => this.onGetForecastResult(response.json()),
  (error) => this.onGetForecastError(error.json()),
  () => this.onGetForecastComplete()
);

이제 내 StaticSettings.BASE_URL은 http://atsomeplace.com/ 과 같은 쿼리 문자열이없는 URL과 비슷 하지만 http://atsomeplace.com/?var1=val1&var2=val2

var1과 var2는 내 HTTP 요청 객체에 어디에 있습니까? 객체처럼 추가하고 싶습니다.

{
  query: {
    var1: val1,
    var2: val2
  }
}

그런 다음 HTTP 모듈만이 URL 쿼리 문자열로 구문 분석하기 위해 작업을 수행합니다.

HttpClient를의 방법은 사용자가 설정할 수 PARAMS을 그것의 옵션에서.

@ angular / common / http 패키지에서 HttpClientModule 을 가져 와서 구성 할 수 있습니다 .

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

@NgModule({
  imports: [ BrowserModule, HttpClientModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

그런 다음 HttpClient를 주입하고 이를 사용하여 요청을 수행 할 수 있습니다 .

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

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name:string;
  constructor(private httpClient: HttpClient) {
    this.httpClient.get('/url', {
      params: {
        appid: 'id1234',
        cnt: '5'
      },
      observe: 'response'
    })
    .toPromise()
    .then(response => {
      console.log(response);
    })
    .catch(console.log);
  }
}

버전 4 이전의 각도 버전의 경우 Http를 사용하여 동일한 작업을 수행 할 수 있습니다 서비스를 .

Http.get의 방법을 구현하는 객체를 얻어 RequestOptionsArgs 번째 매개 변수.

해당 객체 의 검색 필드를 사용하여 문자열 또는 URLSearchParams 객체 .

예를 들면 :

 // Parameters obj-
 let params: URLSearchParams = new URLSearchParams();
 params.set('appid', StaticSettings.API_KEY);
 params.set('cnt', days.toString());

 //Http request-
 return this.http.get(StaticSettings.BASE_URL, {
   search: params
 }).subscribe(
   (response) => this.onGetForecastResult(response.json()), 
   (error) => this.onGetForecastError(error.json()), 
   () => this.onGetForecastComplete()
 );

Http 클래스 의 설명서에 자세한 내용이 있습니다. 그것은 찾을 수 있습니다 여기에 와 작업을 예를 여기에 .

각도 편집> = 4.3.x

HttpClient 는 HttpParams 와 함께 도입되었습니다 . 사용 예 아래 :

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

constructor(private http: HttpClient) { }

let params = new HttpParams();
params = params.append('var1', val1);
params = params.append('var2', val2);

this.http.get(StaticSettings.BASE_URL, {params: params}).subscribe(...);

(오래된 답변)

각도 편집> = 4.x

requestOptions.search더 이상 사용되지 않습니다. requestOptions.params대신 사용하십시오 :

let requestOptions = new RequestOptions();
requestOptions.params = params;

원래 답변 (Angular 2)

URLSearchParams아래와 같이 가져와야 합니다

import { Http, RequestOptions, URLSearchParams } from '@angular/http';

그런 다음 매개 변수를 작성하고 다음과 같이 http 요청을하십시오.

let params: URLSearchParams = new URLSearchParams();
params.set('var1', val1);
params.set('var2', val2);

let requestOptions = new RequestOptions();
requestOptions.search = params;

this.http.get(StaticSettings.BASE_URL, requestOptions)
    .toPromise()
    .then(response => response.json())
...

버전 5 이상

Angular 5 이상 에서는 HttpParams를 사용할 필요가 없습니다 . 아래와 같이 json 객체를 직접 보낼 수 있습니다.

let data = {limit: "2"};
this.httpClient.get<any>(apiUrl, {params: data});

데이터 값은 문자열이어야합니다. { params: {limit: "2"}}

버전 4.3.x +

사용 HttpParams, HttpClient를을 에서 @ 각도 / 일반 / HTTP

import { HttpParams, HttpClient } from '@angular/common/http';
...
constructor(private httpClient: HttpClient) { ... }
...
let params = new HttpParams();
params = params.append("page", 1);
....
this.httpClient.get<any>(apiUrl, {params: params});

도움이 될 수 있습니다!

각도 6

매개 변수를 사용하여 전화를 받기 위해 필요한 매개 변수를 전달할 수 있습니다.

this.httpClient.get<any>(url, { params: x });

여기서 x = {속성 : "123"}.

"123"을 기록하는 API 기능은 다음과 같습니다.

router.get('/example', (req, res) => {
    console.log(req.query.property);
})

내 예

private options = new RequestOptions({headers: new Headers({'Content-Type': 'application/json'})});

내 방법

  getUserByName(name: string): Observable<MyObject[]> {
    //set request params
    let params: URLSearchParams = new URLSearchParams();
    params.set("name", name);
    //params.set("surname", surname); for more params
    this.options.search = params;

    let url = "http://localhost:8080/test/user/";
    console.log("url: ", url);

    return this.http.get(url, this.options)
      .map((resp: Response) => resp.json() as MyObject[])
      .catch(this.handleError);
  }

  private handleError(err) {
    console.log(err);
    return Observable.throw(err || 'Server error');
  }

내 컴포넌트에서

  userList: User[] = [];
  this.userService.getUserByName(this.userName).subscribe(users => {
      this.userList = users;
    });

우편 배달부

http://localhost:8080/test/user/?name=Ethem

최신 Angular 7/8에서는 가장 간단한 방법을 사용할 수 있습니다.

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

getDetails(searchParams) {
    const httpOptions = {
        headers: { 'Content-Type': 'application/json' },
        params: { ...searchParams}
    };
    return this.http.get(this.Url, httpOptions);
}

둘 이상의 매개 변수를 보내려는 경우

구성 요소

private options = {
  sort:   '-id',
  select: null,
  limit:  1000,
  skip:   0,
  from:   null,
  to:     null
};

constructor(private service: Service) { }

ngOnInit() {
  this.service.getAllItems(this.options)
    .subscribe((item: Item[]) => {
      this.item = item;
    });
}

서비스

private options = new RequestOptions({headers: new Headers({'Content-Type': 'application/json'})});
constructor(private http: Http) { }

getAllItems(query: any) {
  let params: URLSearchParams = new URLSearchParams();
  for(let key in query){
    params.set(key.toString(), query[key]);
  }
  this.options.search = params;
  this.header = this.headers();

그리고 @ethemsulan이 한 것처럼 http 요청을 계속하십시오.

서버 측 경로

router.get('/api/items', (req, res) => {
  let q = {};
  let skip = req.query.skip;
  let limit = req.query.limit;
  let sort  = req.query.sort;
  q.from = req.query.from;
  q.to = req.query.to;

  Items.find(q)
    .skip(skip)
    .limit(limit)
    .sort(sort)
    .exec((err, items) => {
      if(err) {
        return res.status(500).json({
          title: "An error occurred",
          error: err
        });
      }
      res.status(200).json({
        message: "Success",
        obj:  items
      });
    });
});

@ angular / common / http의 HttpParams 를 사용 하고 쿼리와 함께 문자열을 전달할 수 있습니다. 예를 들면 다음과 같습니다.

import { HttpClient, HttpParams } from '@angular/common/http';
const query = 'key=value' // date=2020-03-06

const options = {
  params: new HttpParams({
    fromString: query
  })
}

이제 코드에서

this.http.get(urlFull, options);

그리고 이것은 당신을 위해 작동합니다 :)

도와 드릴게요

import ...
declare var $:any;
...
getSomeEndPoint(params:any): Observable<any[]> {
    var qStr = $.param(params); //<---YOUR GUY
    return this._http.get(this._adUrl+"?"+qStr)
      .map((response: Response) => <any[]> response.json())
      .catch(this.handleError);
}

당신이 것을 제공 jQuery를 설치 , 내가 할 npm i jquery --save과에 포함 apps.scripts에angular-cli.json

import { Http, Response } from '@angular/http';
constructor(private _http: Http, private router: Router) {
}

return this._http.get('http://url/login/' + email + '/' + password)
       .map((res: Response) => {
           return res.json();
        }).catch(this._handleError);

공식 문서에서 URL 매개 변수 를 사용할 수 있습니다 .

예: this.httpClient.get(this.API, { params: new HttpParams().set('noCover', noCover) })