[解決済み】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 は、クエリ文字列のないURLのようなものです。 http://atsomeplace.com/ のようにしたいのですが http://atsomeplace.com/?var1=val1&var2=val2

を追加する方法 var1 と var2 をオブジェクトとして、私のHTTPリクエストオブジェクトに追加しますか？

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

それをHTTPモジュールが解析してURLのクエリ文字列に変換します。

解決方法は？

その HttpClient メソッドを使用すると パラメータ をオプションで指定します。

をインポートすることで設定することができます。 HttpClientModule を @angular/common/http パッケージから取得します。

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以前のangularの場合、同じように Http サービスを利用することができます。

は Http.get を実装したオブジェクトを受け取ります。 リクエストオプションアーグ を第2パラメータとして指定します。

は 検索 そのオブジェクトのフィールドには、文字列または 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 クラスにはより詳細な情報があります。それは こちら および動作例 こちら .