Làm cách nào để chuyển đối số url (chuỗi truy vấn) cho yêu cầu HTTP trên Angular?

Tôi đang tạo một yêu cầu HTTP trên Angular, nhưng tôi không biết cách thêm đối số url (chuỗi truy vấn) vào nó.

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

Bây giờ, StaticSinstall.BASE_URL của tôi giống như một url không có chuỗi truy vấn như: http://atsomeplace.com/ nhưng tôi muốn nó là http://atsomeplace.com/?var1=val1&var2=val2

Trường hợp var1 và var2 phù hợp với đối tượng yêu cầu http của tôi? Tôi muốn thêm chúng như một đối tượng.

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

và sau đó chỉ cần mô-đun http thực hiện công việc phân tích nó thành chuỗi truy vấn URL.

Các HttpClient phương pháp cho phép bạn thiết lập các params trong các tùy chọn của nó.

Bạn có thể định cấu hình nó bằng cách nhập httpClientModule từ gói @ angular / common / http.

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

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

Sau đó, bạn có thể tiêm httpClient và sử dụng nó để thực hiện yêu cầu.

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

Đối với các phiên bản góc cạnh trước phiên bản 4, bạn có thể thực hiện tương tự bằng cách sử dụng HTTP dịch vụ .

Các Http.get phương pháp có một đối tượng mà cụ RequestOptionsArgs như một tham số thứ hai.

Trường tìm kiếm của đối tượng đó có thể được sử dụng để đặt chuỗi hoặc URLSearchParams đối tượng .

Một ví dụ:

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

Các tài liệu cho lớp http có nhiều chi tiết hơn. Nó có thể được tìm thấy ở đây và một ví dụ làm việc ở đây .

Chỉnh sửa góc> = 4.3.x

HttpClient đã được giới thiệu cùng với HttpParams . Dưới đây là một ví dụ về việc sử dụng:

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

(Câu trả lời cũ)

Chỉnh sửa góc> = 4.x

requestOptions.searchđã bị phản đối Sử dụng requestOptions.paramsthay thế:

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

Câu trả lời gốc (Góc 2)

Bạn cần nhập URLSearchParamsnhư bên dưới

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

Và sau đó xây dựng các tham số của bạn và thực hiện yêu cầu http như sau:

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

Phiên bản 5+

Với Angular 5 trở lên, bạn KHÔNG phải sử dụng HttpParams . Bạn có thể trực tiếp gửi đối tượng json của bạn như dưới đây.

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

Xin lưu ý rằng các giá trị dữ liệu phải là chuỗi, nghĩa là; { params: {limit: "2"}}

Phiên bản 4.3.x +

Sử dụng HttpParams, HttpClient từ @ angular / common / 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});

Có thể giúp một số!

Góc 6

Bạn có thể truyền các tham số cần thiết để nhận cuộc gọi bằng cách sử dụng params:

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

trong đó x = {thuộc tính: "123"}.

Đối với chức năng api ghi "123":

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

Ví dụ của tôi

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

Phương pháp của tôi

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

trong thành phần của tôi

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

Bởi người đưa thư

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

Trong Angular 7/8 mới nhất, bạn có thể sử dụng cách tiếp cận đơn giản nhất: -

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

Nếu bạn có kế hoạch gửi nhiều hơn một tham số.

Thành phần

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

Dịch vụ

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

Và tiếp tục với yêu cầu http của bạn như cách @ethemsulan đã làm.

Tuyến bên máy chủ

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

Bạn có thể sử dụng HttpParams từ @ angular / common / http và truyền một chuỗi với truy vấn. Ví dụ:

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

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

Bây giờ trong mã của bạn

this.http.get(urlFull, options);

Và điều này làm việc cho bạn :)

Tôi nhảy giúp bạn

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

với điều kiện bạn đã cài đặt jQuery , tôi làm npm i jquery --savevà đưa apps.scriptsvàoangular-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);

Bạn có thể sử dụng Thông số Url từ tài liệu chính thức.

Thí dụ: this.httpClient.get(this.API, { params: new HttpParams().set('noCover', noCover) })