如何通过angular 2将数据发送到服务器 [英] How to sent data Data to the server by angular 2

问题描述

在Angular 2中，我如何根据表单模型将数据发送到服务器.在某些情况下，我可以通过单击addMore按钮添加更多行.

在此处输入图片描述

解决方案

首先，您需要导入HttpModule，如果要发送json_encoded数据，则还需要导入JsonpModule.您可以从@angular/http导入两个模块，并将其作为@NgModule

内部的导入添加到您的app.module.ts文件中.

app.module.ts:

import { HttpModule, JsonpModule } from '@angular/http';

@NgModule({
    imports: [
        ...,
        HttpModule,
        JsonpModule
    ],
    bootstrap: [AppComponent]
})

下一步是提供一个将处理Http请求的服务.您将需要从rxjs包中导入Observable对象和map方法，以使用响应.此外，如果要使用POST HTTP请求发布数据(所有对象都在@angular/http中)，则需要导入Http，Response，Header和RequestOptions对象.在服务中，您可以设置可从组件访问的功能，用它来将数据发送到服务器并捕获您可以订阅的响应.

http.service.ts:

import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { Http, Response, Headers, RequestOptions } from '@angular/http';

@Injectable()
export class HttpService {

    private _url: string = "http://example.com"; // Url which handles JSON encoded data 

    constructor(private _http: Http) {} // Injecting the Http Service

    sendData(data): Observable<Object> {

        let encoded_data = JSON.stringify({ data });
        let headers = new Headers({ 'Content-Type': 'application/json;charset=utf-8' });
        let options = new RequestOptions({ headers: headers });

        return this._http.post(encoded_data, this._url, options).map(
            (res: Response) => res.json() || {}
        );

}

在组件中，您需要导入服务并使用刚刚创建的方法.您也可以订阅此方法以获取响应.

example.component.ts:

import { Component, OnInit } from '@angular/core';
import { HttpService } from 'http.service';

@Component({
    ...
})
export class ExampleComponent implements OnInit {

    constructor(private _httpService: HttpService) {}

    ngOnInit() {}

    sendDataToServer(dataFromForm) {

        this._httpService.sendData(dataFromForm).subscribe(

            response => console.log(response), // success
            error => console.log(error),       // error
            () => console.log('completed')     // complete

    }

}

更多信息，请参见 HTTP客户端

In Angular 2 How do i send data to the server according to the form model. In some case I might add more row by clicking addMore Button.

enter image description here

解决方案

First you need to import the HttpModule, and if you're going to send the json_encoded data, you need to import JsonpModule, as well. You can import both modules from @angular/http and add it to your app.module.ts file as the imports inside your @NgModule

app.module.ts:

import { HttpModule, JsonpModule } from '@angular/http';

@NgModule({
    imports: [
        ...,
        HttpModule,
        JsonpModule
    ],
    bootstrap: [AppComponent]
})

Next step is to make a service which will handle the Http Requests. You will need to import an Observable object and map method from rxjs package to work with the response. Also, you need to import the Http, Response, Headers and RequestOptions objects if you want to post data with POST HTTP Request (all object are in @angular/http. In service, you set up the function that you can access from your component and use it to send the data to server and catch the response that you can subscribe to.

http.service.ts:

import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { Http, Response, Headers, RequestOptions } from '@angular/http';

@Injectable()
export class HttpService {

    private _url: string = "http://example.com"; // Url which handles JSON encoded data 

    constructor(private _http: Http) {} // Injecting the Http Service

    sendData(data): Observable<Object> {

        let encoded_data = JSON.stringify({ data });
        let headers = new Headers({ 'Content-Type': 'application/json;charset=utf-8' });
        let options = new RequestOptions({ headers: headers });

        return this._http.post(encoded_data, this._url, options).map(
            (res: Response) => res.json() || {}
        );

}

In component you need to import the service and use the method you've just created. You can also subscribe to this method to get the response.

example.component.ts:

import { Component, OnInit } from '@angular/core';
import { HttpService } from 'http.service';

@Component({
    ...
})
export class ExampleComponent implements OnInit {

    constructor(private _httpService: HttpService) {}

    ngOnInit() {}

    sendDataToServer(dataFromForm) {

        this._httpService.sendData(dataFromForm).subscribe(

            response => console.log(response), // success
            error => console.log(error),       // error
            () => console.log('completed')     // complete

    }

}

More information can be found here HTTP Client

这篇关于如何通过angular 2将数据发送到服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！