如何在Angular2中管理服务?

时间:2015-07-25 09:05:21

标签: javascript angular typescript

Angular 2 :2.0.0-alpha.31 / Typescript 1.5

目前我将服务管理为一个简单的Class,然后将此Class注入其他组件。例如:

export class PlayerService {
  http: Http;
  players = [];

  constructor( @Inject(Http) http) {
        this.http = http;
  }

  getAll(callback) {
        this.http.get('/data/players.json')
              .toRx()
              .map((res) => res.json())
              .subscribe((data) => {
                    this.players= data;
                    callback(data);
              });
  }

  add(player) {
        //call webservice to save user  
        this.players.push(player); //only if save has work  
  }
  delete(player) {
        //Not implemented yet   
  }
  get(id) {
        //Not implemented yet   
  }
}

我想,我这样做的方式不对......

  • 我正在使用http.get().toRx().subscribe()?我以为我看到有些人直接从Observable
  • 返回toRx()
  • 如果两个组件同时要求玩家(getAll()),则会执行两个查询。我是否必须管理旗帜或是否有另一种方式?
  • 我在这里用回调工作。如果我想要“立即”(没有异步)
  • ,我该怎么办?
  • {@ 1}}会自动通知玩家添加/删除吗?我是否必须使用某种事件来处理这个问题(任何一个例子?)?

所以我的问题是:

  • 是否有一种在 Angular2 中管理服务的常用方法?

1 个答案:

答案 0 :(得分:4)

首先,服务工作做得很好,就像使用Angular2一样:注入其他组件的Class

那就是说,关于你提出的其他问题,我宁愿返回并将结果存储在一个承诺中,而不是使用回调:

getAll() {
    return players || players = new Promise(
        (resolve) => this.http.get('people.json').observer({next: resolve})
    );
}

注意:您应该可以使用Observable.toPromise()但由于某种原因,它在Angular2中不起作用

这样进一步调用getAll()不会触发更多响应。

对于同步问题,你不应该这样做。现在你已经在承诺中了,只需调用getAll()并在请求玩家时返回一个承诺。

get(id) {
    return getAll().then((result) => {return Promise.resolve(result[id])});  
}

关于处理玩家添加和删除的方式,这正是Observables在RxJS中的意图。您需要提供和Observable流,以便在播放器列表更改时通知其观察者。您可以使用EventEmitter

constructor( @Inject(Http) http) {
    this.http = http;
    this.myEventEmitter = new EventEmitter();
}

getUpdateStream() {
    myEventEmitter.toRx();
}

更改播放器列表时,只需执行myEventEmitter.next(players)