javascript - 如何在 Angular2 中管理服务？

Question

Angular 2:2.0.0-alpha.31/ typescript 1.5

目前我将我的服务作为一个简单的 Class 来管理，然后我将这个 Class 注入(inject)到另一个组件中。示例:

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() ？我以为我看到有些人直接从 toRx()
返回 Observable
• 如果两个组件同时请求播放器 (getAll())，将执行两个查询。我必须管理标志还是有其他方法？
• 我在这里处理回电。如果我“立即”想要数据(无异步)，我必须做什么
• 组件 是否会自动通知玩家添加/删除？我是否必须使用某种事件来处理这个(任何例子？)？

所以我的问题是:

• 在 Angular2 中是否有一种通用的方法来管理服务？

Answer 1

首先，服务像您所做的那样做得很好，这是 Angular2 的方式:将 Class 注入(inject)到其他组件中。

也就是说，关于您提出的其他问题，我宁愿返回结果并将结果存储在 promise 中，而不是使用回调:

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

注意:您应该能够使用 Observable.toPromise() 但由于某些原因它在 Angular2 中对我不起作用

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

对于同步问题，你不应该这样做。现在您已将其包含在 promise 中，只需调用 getAll() 并在玩家被请求时返回 promise 。

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)