Angular2：一旦构造函数在服务中完成（http get），Return of getter

Question

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

在此服务中，我在构造函数中调用我的 json 文件，并使用 getter 在其他组件中获取此列表。但是当我调用 getter 时，构造函数还没有完成（http get 有点慢）而且它 returns 什么都没有..（有一点超时，一切正常但它很脏）

是否可以在构造函数完成后调用 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 方法的 return 可观察对象。这样，组件将收到值通知。

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

更新

在您的组件中，您需要在 returned observable 上注册：

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

Answer 3

使用

中的方法

它存储了一个由 getValue() 返回的 observable。 observable 以多个订阅者获得相同值的方式构建。

没有办法直接获取像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 }] );
  }  
}

Angular2：一旦构造函数在服务中完成（http get），Return of getter

Angular2 : Return of getter once the constructor finished in a service (http get)

angularjs

json

angular

angular2-services

angular2-http