typescript - 如何让 Angular 2 将所有请求发送为 application/x-www-form-urlencoded

Question

我在 Angular 1 中遇到过类似的问题，所以我知道如何实现，只是我错过了最后一步。

就像上次一样，一个为我们的应用做后端的人接受类型为 application/x-www-form-urlencoded 的请求，就像 Angular 1 一样，Angular 2 也发送类型为 应用程序/json。

我对 ng1 所做的是，在配置中我修改了 http 提供程序以在每个请求的正文上运行 urlencoded。

我在 ng2 中看到有 https://angular.io/docs/ts/latest/api/http/BaseRequestOptions-class.html一个 BaseRequestOptions 类，我认为它是为这个唯一的文档制作的，有点不存在所以我不确定如何正确地实现它(我也是新手 typescript )。

我如何提供这个，以便我的每个 post 和其他请求在最后作为 urlencoded 发送(我还希望该函数在 body 上运行这样它实际上就变成了 urlencoded)。

另外:为什么没有一个更简单的选项，因为现在我可以看到 ASP.Net 和 Flask(所以我想还有很多其他的)都不支持 application\json默认情况下？

编辑:我制作了一个自定义函数，我将其用于我在 POST 正文中发送的每个对象，但我希望有一个更简单、更通用的解决方案。

import { URLSearchParams } from 'angular2/http';

export function urlEncode(obj: Object): string {
    let urlSearchParams = new URLSearchParams();
    for (let key in obj) {
        urlSearchParams.append(key, obj[key]);
    }
    return urlSearchParams.toString();
}

然后我像这样使用它

this.http.post('http://localhost:5000/user/auth/login', urlEncode(data))

Answer 1

尝试这样的事情:

DefaultRequestOptions.ts

@Injectable()
export class DefaultRequestOptions extends BaseRequestOptions{
    headers:Headers = new Headers({
        'Content-Type': 'application/x-www-form-urlencoded'
    });
}

启动.ts

bootstrap(AppComponent,[
    HTTP_PROVIDERS,
    provide( RequestOptions, { useClass: DefaultRequestOptions } ),
    provide(Http, { useFactory:
        function(backend, defaultOptions) {
            return new Http(backend, defaultOptions); },
        deps: [XHRBackend, RequestOptions]})
]);

重要提示:确保您不会在将使用 Http 对象的组件中再次声明 HTTP_PROVIDERS，否则它将覆盖您在 boot.ts 中注入(inject)的对象。

---

对于其他功能，您可以将它添加到任何 @Injectable 对象中，将该对象添加到组件的构造函数中，您可以从任何组件中以这种方式调用它，或者您可以尝试扩展 http angular 对象并覆盖post 方法，以便在幕后为每个 post 请求执行此操作。