如何在Angular2中使用http参数序列化器

Question

我试图在Angular2中使用http参数序列化器。我谷歌了很多，但是例子只适用于angular1，如下所示。如何在templateUrl中注入$http参数序列化器

在Angular2中使用它的语法是什么？

Answer 1

请查看HttpParams以替换URLSearchParams

这个用法有点棘手，因为HttpParams是不可变的，所以如果你想一个接一个地附加很多东西，你必须这样做。

var params = new HttpParams();
params = params.append('foo1', 'bar1');
params = params.append('foo2', 'bar2');

Answer 2

我也有同样的问题

我的解决方案是：我有一篇文章，我将数据发布到web服务，然后序列化我的对象。我就是这样做的。它非常简单，易于使用。

基本示例

let params = new URLSearchParams();
params.set('search', term); // the user's search value

设置搜索参数

我的表单组件。ts

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


// User is done editing, serialize and POST to web service
saveEdits(): void {
    let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
    let options = new RequestOptions({ headers: headers });

    // Dynamically serialize the entire object
    // *** THIS IS THE SERIALIZATION ***
    let params: URLSearchParams = this.serialize(this.selectedItem);


    this._http.post('http://URLtoPOSTobjTo/path', params, options)
      .map(this.extractData)
      .catch(this.handleError);

}

/**
 * Serializes the form element so it can be passed to the back end through the url.
 * The objects properties are the keys and the objects values are the values.
 * ex: { "a":1, "b":2, "c":3 } would look like ?a=1&b=2&c=3
 * @param  {SystemSetup} obj - The system setup to be url encoded
 * @returns URLSearchParams - The url encoded system setup
 */
serialize(obj: SystemSetup): URLSearchParams {
    let params: URLSearchParams = new URLSearchParams();

    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            var element = obj[key];

            params.set(key, element);
        }
    }
    return params;
}