web-services - Angular2 如何使用服务类发布数据

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     
    }
}    

公寓服务.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
    } 
}

服务器.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

您可以通过依赖注入(inject)来注入(inject)服务并在组件中使用它

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{
  providers: [ApartmentService]
}