typescript - 如何从 Angular 2的服务中获取数据？

Question

我可以使用 http(在同一组件中)获取数据。但我无法使用服务获取数据。我们可以从服务器调用服务方法和 grt 数据并显示在组件上吗？我尝试提供服务并尝试从服务器获取数据。但我不知道如何使用此服务？ http://plnkr.co/edit/hfhY6EdLVNOLP6d4QsWP?p=preview

import {Component, Injectable,Input,Output,EventEmitter} from 'angular2/core'
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/add/operator/map';
// Name Service
export interface myData {
   name:Array;
}



@Injectable()
export class SharedService {
  sharingData: myData=[{name:"nyks"}];
   constructor(private http:Http) {
    }
  getData:Array()
  {
    this.sharingData.name=this.http.get('data.json')
        .map(res => res.json());

    return this.sharingData.name;
  }
} 

Answer 1

你可以试试这个:

import {SharedService} from './service';

@Component({
  (...)
  providers: [SharedService]
})
export class MyComponent {
  constructor(private service:SharedService) {
    this.service.getData();
  }
}

也就是说，我在您的服务中看到了奇怪的东西，因为 Angular2 HTTP 支持利用了可观察对象(异步处理)。我会这样重构它:

@Injectable()
export class SharedService {
  //sharingData: myData=[{name:"nyks"}];
  constructor(private http:Http) {
  }

  getData:Array() {
    return this.http.get('data.json')
               .map(res => res.json());
  }
}

在组件中:

import {SharedService} from './service';

@Component({
  (...)
  template: `
    <ul>
      <li *ngFor="d of dataToDisplay">{{d.name}}</li>
    <ul>
  `,
  providers: [SharedService]
})
export class MyComponent {
  constructor(private service:SharedService) {
    this.service.getData().subscribe(data => {
      this.dataToDisplay = data;
    });
  }
}

这个答案可以给你更多的细节:

• How to Consume Http Component efficiently in a service in angular 2 beta?