url 인수(쿼리 문자열)를 Angular의 HTTP 요청에 전달하려면 어떻게 해야 합니까?

url 인수(쿼리 문자열)를 Angular의 HTTP 요청에 전달하려면 어떻게 해야 합니까?

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다음과 같은 쿼리 문자열이 없는 URL과 같습니다.http://atsomeplace.com/하지만 나는 그것이 마치http://atsomeplace.com/?var1=val1&var2=val2

추가 방법var1,그리고.var2오브젝트로서 HTTP 요청 오브젝트에 액세스 할 수 있습니까?

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

HTTP 모듈만 URL 쿼리 문자열로 해석하는 작업을 수행합니다.

HttpClient 메서드를 사용하면 옵션에서 매개 변수를 설정할 수 있습니다.

@angular/common/http 패키지에서HttpClientModule을 Import하여 설정할 수 있습니다.

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를 구현하는 개체를 두 번째 매개 변수로 사용합니다.

해당 객체의 검색 필드를 사용하여 문자열 또는 URLearchParams 객체를 설정할 수 있습니다.

예:

 // 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;

---

원답(각도 2)

Import가 필요합니다.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+

@angular/common/http에서 HttpParams, Http Client 사용

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

또한 다음 명령을 사용하여 중첩된 개체를 문자열화해 보십시오.JSON.stringify().

각도 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.scriptsangular-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) })

언급URL : https://stackoverflow.com/questions/34475523/how-to-pass-url-arguments-query-string-to-a-http-request-on-angular