如何有效地消耗HTTP组件在角2测试版服务？ [英] How to Consume Http Component efficiently in a service in angular 2 beta?

问题描述

我想是角2-β玩，我想用的 HTTP 的组件工作。但这里存在一个严重的问题：

I'm trying to play with Angular 2-beta and I want to work with Http component. But there is a serious problem here:

我看了这并
我知道在2角（角不同1）的 HTTP 的组件不是一个返回的无极的服务。它返回一些所谓的观测。我们知道，一个组件是最好不要使用的 HTTP 的直接。有效的方法是做一个服务，负责消耗的 HTTP 的。但是如何？！如果这完成请求后，返回一个承诺？ （看这里）

I read this and I know in Angular 2(Unlike Angular 1), Http component is not a service that returns a Promise. It returns something called Observable. We know that a Component is better not to use Http directly. Efficient way is to make a service that is responsible to consume Http. But how?! Should this after completing a request, return a promise? (look at here)

是否有意义呢？！

推荐答案

这是可能的角2实施服务。它们简单地对应于可注射类如下所述。在这种情况下，这类可以注入到类似的组件的其他元素。

It's possible with Angular 2 to implement services. They simply correspond to injectable classes as described below. In this case this class can be injected into other elements like components.

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 对象在指定的条件（使用其构造函数）的Bootstrap当 HTTP_PROVIDERS 应用程序的主要组成部分：

You can inject an Http object in it (using its constructor) at the condition you specified HTTP_PROVIDERS when bootstraping the main component of your application:

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

bootstrap(AppComponent, [
  HTTP_PROVIDERS
]);

此服务可以再注入的组分，如下所述。不要忘了在供应商范围内指定它的组件列表。

This service can be then injected into a component, as described below. Don't forget to specify it within the providers list of the component.

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 对象的方法，并返回相应您的要求可观察对象：

You can then implement a method leveraging the Http object in your service and return the Observable object corresponding to your request:

@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 法和认购可观察对象的回调通知当响应有更新组件的状态（在同样的方式你没有在Angular1承诺）：

The component can then call this getCompanies method and subscribe a callback on the Observable object to be notify when the response is there to update the state of the component (in the same way you did with promises in Angular1):

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

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

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

修改

由于福克斯在他的评论暗示，在异步管也可以用于对可观察的对象上隐式订阅。这里是使用它的方式。首先更新您的组件把观察的对象属性要显示：

As foxx suggested in his comment, the async pipe could be also used to implicitly subscribe on the observable object. Here is the way to use it. First update your component to put the observable object in the attribute you want to display:

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

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

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

使用，然后异步管道在你的模板：

Use then the async pipe in your template:

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

本文分为两部分可以提供更多的细节，以及：

This article in two parts could give more details as well:

• http://restlet.com/blog/2015/12/30/implementing-an-angular-2-frontend-over-an-apispark-hosted-web-api-part-1/


• http://restlet.com/blog/2016/01/06/implementing-an-angular-2-frontend-over-an-apispark-hosted-web-api-part-2/

希望它可以帮助你，
蒂埃里

Hope it helps you, Thierry

这篇关于如何有效地消耗HTTP组件在角2测试版服务？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！