Angular2:一旦构造函数在服务中完成，getter就会返回(http-get)

Question

对于我的应用程序，我需要使用List.json来构建一个列表（我应用程序的核心）。为了在我的所有组件之间共享这个列表，我决定创建一个服务。

在这个服务中，我在构造函数中调用json文件，并使用getter在其他组件中获取这个列表。但是当我调用getter时，构造函数还没有完成（http-get有点慢），它什么也不返回。。（有一点超时，一切都很好，但很脏）

构造函数完成后，是否可以调用getter？

提前感谢！

我的服务：

import {Injectable} from "angular2/core";
import {Http, Response, HTTP_PROVIDERS} from 'angular2/http';
@Injectable()
export class listService {
    private list;

    constructor(http: Http) {
        http.get('app/List.json')
            .map(res => res.json())
            .subscribe(
              data => this.list = data 
            );
    }

    getValue(){
        return this.list;
    }
}

显示列表的我的组件：

import {listService} from './listService';
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, Router} from 'angular2/router';
import 'rxjs/add/operator/map';
@Component({
  selector: 'list',
  template: `
    <h2>Formations </h2>
    <ul><li (click)='showItem(item)'  *ngFor="#item of list"><span >{{item.Method}}</span></li></ul>
`,
  directives: [ROUTER_DIRECTIVES]
})
export class List {
  public list: Object[];
  constructor(private listService:listService, private _router: Router) {
      this.list = this.listService.getValue();
  }
  showItem(item){
    this._router.navigate( ['Item', { id: item.id }] );
  }  
}

Answer 1

constructor(private http: Http) {
}     
getValue(){
        return this.http.get('app/LSD.json')
            .map(res => res.json());
}

---

export class List {
  public list: Object[];
  constructor(private listService:listService, private _router: Router) {
       this.listService.getValue().subscribe(
              data => this.list = data 
            );
  }
}

Answer 2

您可以利用可观察的作为getValue方法的返回。通过这种方式，组件将收到该值的通知。

@Injectable()
export class listService {
  private list;
  private obs;
  constructor(http: Http) {
    this.obs = http.get('app/List.json')
        .map(res => res.json())
        .do(
          data => {
            this.list = data;
        ).share();
  }
  getValue() {
    if (this.list) {
      return Observable.of(this.list);
    } else {
      return this.obs;
    }
  }
}

更新

在您的组件中，您需要在返回的可观察到的上注册

@Component({
})
export class SomeComponent {
  constructor(private service: listService) {
    this.service.getValue().subscribe(
      (list) => {
        // do something with the list
      });
  }
}

Answer 3

使用https://stackoverflow.com/a/36296015/217408

它存储一个由getValue()返回的可观测值。可观察的是以一种方式构建的，即多个订阅者获得相同的价值。

没有办法直接获得像http.get() 这样的异步调用的值

import {Injectable} from "angular2/core";
import {Http, Response, HTTP_PROVIDERS} from 'angular2/http';
@Injectable()
export class listService {
    private list;

    constructor(http: Http) {
        this.observable = this.http.get('app/List.json')
            .map(res => res.json()).publishLast().refCount();
    }

    getValue(){
        return this.observable;
    }
}

import {listService} from './listService';
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, Router} from 'angular2/router';
import 'rxjs/add/operator/map';
@Component({
  selector: 'list',
  template: `
    <h2>Formations </h2>
    <ul><li (click)='showItem(item)'  *ngFor="#item of list"><span >{{item.Method}}</span></li></ul>
`,
  directives: [ROUTER_DIRECTIVES]
})
export class List {
  public list: Object[];
  constructor(private listService:listService, private _router: Router) {
      this.listService.getValue().subscribe(value => this.list = value);
  }
  showItem(item){
    this._router.navigate( ['Item', { id: item.id }] );
  }  
}