如何在Angle 2 Beta中的服务中有效使用Http Component？

Question

我正在尝试使用 Angular 2-beta ，我想使用 Http 组件。但是这里有一个严重的问题：

我知道在Angular 2中（不同于Angular 1）， Http 组件不是返回 Promise 的服务。它返回一个称为
Observable的 东西。我们知道，最好不要直接使用 Http 。高效的方法是制作一个负责使用 Http的服务
。但是如何？完成请求后是否应该返回承诺？

真的有道理吗？

Answer 1

Angular 2可以实现服务。它们仅对应于如下所述的可注射类。在这种情况下，此类可以注入到其他元素（如组件）中。

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

@Injectable()
export class CompanyService {
  constructor(http:Http) {
    this.http = http;
  }
}

您可以在引导应用程序的主要组件时Http指定的条件下（使用其构造函数）在其中注入对象HTTP_PROVIDERS：

import {bootstrap} from 'angular2/platform/browser'
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component'

bootstrap(AppComponent, [
  HTTP_PROVIDERS
]);

然后可以将该服务注入到组件中，如下所述。不要忘记providers在组件列表中指定它。

import { Component, View, Inject } from 'angular2/core';
import { CompanyService } from './company-service';

@Component({
  selector: 'company-list',
  providers: [ CompanyService ],
  template: `
    (...)  `
})

export class CompanyList {
  constructor(private service: CompanyService) {
    this.service = service;
  }
}

然后，您可以实现一种利用Http服务中的对象的方法，并返回与您的请求相对应的Observable对象：

@Injectable()
export class CompanyService {
  constructor(http:Http) {
    this.http = http;
  }

  getCompanies() {
    return this.http.get('https://angular2.apispark.net/v1/companies/')
                  .map(res => res.json());
  }
}

然后，组件可以调用此getCompanies方法，并在Observable对象上预订回调，以便在响应存在时通知以更新组件的状态（与在Angular1中对promise所做的方式相同）：

export class CompanyList implements OnInit {
  public companies: Company[];

  constructor(private service: CompanyService) {
    this.service = service;
  }

  ngOnInit() {
    this.service.getCompanies().subscribe(
      data => this.companies = data);
  }
}

编辑

正如foxx在他的评论中建议的那样，async管道还可以用于隐式订阅可观察对象。这是使用它的方法。首先更新您的组件，以将可观察对象放入您要显示的属性中：

export class CompanyList implements OnInit {
  public companies: Company[];

  constructor(private service: CompanyService) {
    this.service = service;
  }

  ngOnInit() {
    this.companies = this.service.getCompanies();
  }
}

然后在模板中使用异步管道：

@Component({
  selector: 'company-list',
  providers: [ CompanyService ],
  template: `
    <ul>
      <li *ngFor="#company of companies | async">{{company.name}}</li>
    </ul>
  `
})
export class CompanyList implements OnInit {
  (...)
}