Angular で HTTP リクエストに URL 引数 (クエリ文字列) を渡すにはどうすればいいですか? 質問する

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 クエリ文字列に解析する作業を実行します。

ベストアンサー1

HTTPクライアントメソッドを使用すると、オプションでパラメータを設定できます。

インポートすることで設定できますHttpクライアントモジュール@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番目のパラメータとして。

そのオブジェクトの検索フィールドは文字列またはURL検索パラメータ物体。

例:

 // 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クラスのドキュメントにはさらに詳しい情報が記載されています。ここそして実際の例ここ

おすすめ記事