2

对于我的应用程序，我需要使用 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 }] );
  }  
}
4

3 回答 3

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

}
于 2016-03-31T12:13:57.227 回答
0

使用来自https://stackoverflow.com/a/36296015/217408的方法

它存储了一个由getValue(). 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 }] );
  }  
}
于 2016-04-01T09:30:59.523 回答
0

您可以利用 observable 作为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;
    }
  }
}

更新

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

@Component({
})
export class SomeComponent {
  constructor(private service: listService) {
    this.service.getValue().subscribe(
      (list) => {
        // do something with the list
      });
  }
}
于 2016-03-31T13:26:12.863 回答