在angular2中发布数据

Question

我在调用服务添加数据后面临将json添加到URL中的问题。

下面是我的文件

首先

CreateNew(): void {
  this.router.navigate(['/detail', 0]);
}

detail.ts

Submit() {
    let templateId;
    this.route.params.subscribe(
        (param: any) => {
            templateId = +param['templateid']; });
    if (templateId === 0) {
        this.jobservice.addJob(this.job).subscribe(error => this.errorMessage = <any>error);
    }
    this.router.navigate(['/template']);
}

服务

addJob(job: Job): Observable <Job> {

    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    console.log(job);
    return this.http.post('http://sample/api/Product/AddProduct', JSON.stringify(job), options).map(this.extractData).catch(this.handleError);
}

我找不到为什么将json数据添加到url的问题。

Answer 1

使用RequestOption时，不使用post，get，put或delete方法。 但是您使用“请求”。 这是一个有效的示例请求：

 post<RQ, RS>(url: string, request: RQ, responseType: RS, withToken: boolean): Promise<RS> {
        let postReq: Request = this.createAuthorizationHeader<RQ>(url, request, RequestMethod.Post, withToken);
        return this.http.request(postReq).toPromise()
            .then(res => {
                return this.processingData<RS>(res, responseType);
            })
            .catch(this.handleError);
    }

然后在此处将标头添加到请求中：

/**
 * This function updates the token in the header
 */
createAuthorizationHeader<RQ>(url: string, requestData: RQ, method: RequestMethod, withToken: boolean) {
    let headers = new Headers();
    let options = new RequestOptions({
        method: method,
        url: url
    });
    /**
     * Include token when boolean is passed
     */
    if (withToken) {
        headers.append('token', token);
        options.headers = headers;
    }
    /**
     * create bosy for post and put
     */
    if (method === RequestMethod.Post || method === RequestMethod.Put) {
        // do something
    }
    let request = new Request(options);
    return request;
}

这应该可行，请记住在使用请求选项时使用“ http.request ..”

import { Http, Request, Response, Headers, RequestMethod, RequestOptions } from '@angular/http';
...
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({
    method: RequestMethod.Post,
    url: url,
    headers = headers,
    body: job
});
let request = new Request(options);
console.log(options);
return this.http.request(options).map(this.extractData).catch(this.handleError);

Answer 2

问题是刷新页面时显示404错误。 在app.module.ts中

添加导入：从'@ angular / common'导入{HashLocationStrategy，LocationStrategy}； 在NgMoudle提供程序中，添加：{provide：LocationStrategy，useClass：HashLocationStrategy}，此问题已得到解决。

Answer 3

这应该很好。 我在使用angular 2.1.0的环境中进行此工作。

import { Http, Request, Response, Headers, RequestMethod, RequestOptions } from '@angular/http';
...
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({
    method: RequestMethod.Post,
    url: 'localhost:51293/template',
    headers = headers,
    body: job
});
let request = new Request(options);
console.log(options);
return this.http.request(options).map(this.extractData).catch(this.handleError);