Angular2如何使用服務類POST數據

Question

我有一個簡單的申請表，我試圖發布到服務器。 我對Angular2很新

如何將數據從組件傳遞到服務並傳遞到服務器以獲取POST請求。

當我直接從FireFox插件'httpRequester'嘗試它時，POST工作正常

這是TaskComponent.ts

@Component({
    selector: 'tasks',
    template: `<div mdl class="mdl-grid demo-content">

          <div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col">
                <h3>Create Task Page</h3>   

                <form action="#" (ngSubmit)="onSubmit()">
                  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                    <input class="mdl-textfield__input" type="text" pattern="[A-Z,a-z]*" id="taskname" [(ngModel)]="data.taskname"/>
                    <label class="mdl-textfield__label" for="taskname">Task Name</label>
                    <span class="mdl-textfield__error">Only alphabet and no spaces, please!</span>
                   </div> 
                  <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" type="submit">Create Task</button>
                </form>          
    `,
    directives: [ROUTER_DIRECTIVES, MDL]
})

export class CreateTaskComponent {

    data: any

    constructor() { 
      this.data = {
        //taskname: 'Example Task'
      };
    }

    onSubmit(form) {
      console.log(this.data.taskname);    <--Data is passed upon submit onto the console. Works fine.  

      //Need to call the postApartment method of ApartmentService     
    }
}    

ApartmentService.ts

import {Http, Response} from 'angular2/http'
import {Injectable} from 'angular2/core'
import 'rxjs/add/operator/map';

@Injectable()
export class ApartmentService {

    http: Http;
    constructor(http: Http) {
        this.http = http;
    }

    getEntries() {
        return this.http.get('./api/apartments').map((res: Response) => res.json());
    }

    getProfile(userEmail :string){
       return this.http.get(`./api/apartments/getprofile/${userEmail}`).map((res: Response) => res.json());
    }

    postApartment(){
        // Not familiar with the syntax here
    } 
}

Server.ts

router.route('/api/apartments')          
    .post(function(req, res) {        
        var apartment = new Apartment();
        apartment.name = req.body.name;

        apartment.save(function(err) {
            if (err)
                res.send(err);
            res.json({ message: 'Apartment created!' });
        });
  })

Answer 1

您可以通過依賴注入注入服務並在組件中使用它

export class CreateTaskComponent {
    constructor(){private _apartmentService: ApartmentService}{}
}

您可以通過任何組件功能訪問它

onSubmit(form) {
  console.log(this.data.taskname);    <--Data is passed upon submit onto the console. Works fine.  

  //Need to call the postApartment method of ApartmentService     
  this._apartmentService.postApartment()
}

在引導組件時，您必須將其作為依賴項添加

bootstrap(AppComponent, [ApartmentService]);

執行最后一步的另一個選擇是在Component裝飾器中添加提供程序

@Component{
  providers: [ApartmentService]
}

Answer 2

在組件中注入apartmentService，不需要提供者，因為我已經引導它。 （如果您啟動該服務，請不要將其包含在提供程序中。它會破壞系統）

export class CreateTaskComponent {

    data: any

    constructor(private apartmentService: ApartmentService) { 
      this.data = {};
    }

    onSubmit(form) {
      this.apartmentService.postApartment(this.data);           
    }
}    

關鍵部分是服務中的postApartment（）方法

 postApartment(data :any){
          return this.http.post('/api/apartments',
               JSON.stringify(data),{headers : new Headers({'Content-Type':'application/json'})
               })
               .map((res: Response) => res.json()).subscribe();
    } 

還要確保在server.js代碼上，mongoose字段與傳遞的http body參數匹配。 我不得不修復它以使其工作。