以angular2发布数据

时间:2016-11-23 05:25:53

标签: json angular

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

下面是我的文件

first.ts

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']);
}

service.ts

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数据添加到网址的原因。

3 个答案:

答案 0 :(得分:0)

当您使用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);

答案 1 :(得分:0)

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

从'@ angular / common'添加导入:import {HashLocationStrategy,LocationStrategy}; 在NgMoudle提供程序中,添加:{provide:LocationStrategy,useClass:HashLocationStrategy} 这解决了这个问题。

答案 2 :(得分:0)

这应该很好。我使用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);