我想从一个Angular组件触发HTTP请求，但我不知道如何向它添加URL参数(查询字符串)。
this.http.get(StaticSettings.BASE_URL).subscribe(
(response) => this.onGetForecastResult(response.json()),
(error) => this.onGetForecastError(error.json()),
() => this.onGetForecastComplete()
)
现在是我的静态设置。BASE_URL就像一个没有查询字符串的URL: http://atsomeplace.com/，但我想让它像http://atsomeplace.com/?var1=val1&var2=val2
如何添加var1，和var2到我的HTTP请求对象作为对象?
{
query: {
var1: val1,
var2: val2
}
}
然后只有HTTP模块将其解析为URL查询字符串。
当前回答
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—保存并包含在应用程序中。angular-cli.json中的脚本
其他回答
编辑Angular >= 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(...);
(老答案)
编辑Angular >= 4.x
requestOptions。搜索已弃用。requestOptions使用。改为参数:
let requestOptions = new RequestOptions();
requestOptions.params = params;
原始答案(Angular 2)
您需要导入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())
...
HttpClient方法允许你在它的选项中设置参数。
你可以通过从@angular/common/http包中导入HttpClientModule来配置它。
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方法接受一个实现RequestOptionsArgs的对象作为第二个参数。
该对象的搜索字段可用于设置字符串或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类的文档有更多详细信息。在这里可以找到它，在这里可以找到一个工作示例。
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);
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—保存并包含在应用程序中。angular-cli.json中的脚本
您可以使用官方文档中的Url参数。
操作:这个httpClient。得到(这个。火，(params: new HttpParams()。集合(“noCover”，noCover)
