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