如何只发送一次查询并将结果提供给所有组件？ （应该很简单）

Question

我在个人项目中使用角度2。所以这是带有一些sudo-code的简化场景。

app
 |- main.ts            /* bootstrap the app */
 |- app.component.ts   /* basically with a template: `<nav></nav>
 |                                                    <router-outlet></router-outlet>`.
 |                        And also have providers: [CatService] */
 |- nav.component.ts   /* a navigation bar where each cat's name is an option. 
 |                        ngOnInit(){ this._catService.getCats().then(assignCats) } */
 |
 |- cat.components.ts  /* show the cat's detail selected from the nav component 
                          ngOnInit(){ this._catService.getCat().then(assignCat); } */
 |
 |- cat.service.ts     /* getCats() method to send query to a database for all the cats */

确定。我希望这看起来不太复杂。

唯一的问题是，我正在调用this._catService.getCats()，它会在nav.component和cat.component中向数据库发送查询。但实际上没有必要再发送两次查询，因为我已经知道数据不会经常变化。我现在只想到两种处理方法：

1. 在this._catService.getCats()中缓存数据库调用的结果，以便在第二次调用中，它可以返回缓存的值而不是发送第二个查询。

2. 在app.component处执行查询，然后将结果作为nav传递给cat和@input。但是，这意味着如果我有一个新组件，我必须将结果传递给它吗？然后最终app.component的模板可能会变成类似：<nav [cats]="queriedCats"></nav>，<cat [cats]="queriedCats"></cat>，<somecomponent [cats]="queriedCats"></somecomponent> ...这对我来说真的很糟糕。

你怎么看？哪种方式是首选方式？

Answer 1

为此，我将利用observables的do运算符。这是一个示例：

export class CatsService {
  getCats() {
    if (this.cachedCats) {
      return Observable.of(this.cachedCats);
    } else {
      return this.http.get(...)
         .map(res => res.json())
         .do(data => {
           this.cachedCats = data;
         })
    }
}