缓存firebase数据不会重复请求。 Angular2与angularfire2

Question

我从firebase获取可观察的对象列表，然后在我的组件中订阅它（通过异步管道）。现在一切都很完美。列表仅在某些更改时才会重新加载。

//getting observable list from firebase 
//ArticlesService 
    public getAllArticles(limit:number = 100):Observable<Article[]> 
    { 
     return this.af.database.list("/articles/", { 
      query: { 
      limitToFirst: limit 
      } 
     }).map((arts) => { 
      return arts.map(art => { 
      return Article.unpack(art); //creating an Article object 
      }) 
     }) 
    } 

//ArticlesComponent 
ngOnInit() { 
    this.articles$ = this.artService.getAllArticles(); 
} 

<app-articles-list [articles]="articles$ | async"></app-articles-list> 

然而，当我使用Angular2路由器和路线导航出来，然后回 - 从它创建了一个渲染延迟和交通的火力似乎再次像所有相同的数据加载高架。

我想这会发生，因为当我导航出来然后回来时，订阅被重新创建并且数据被问到是否它已经被加载。

所以，我在想什么才能避免这种行为？可能是缓存，可能是别的。目前还不确定。

Answer 1

解决了！本文帮助了很多：http://www.syntaxsuccess.com/viewarticle/caching-with-rxjs-observables-in-angular-2.0

//ArticleService 
private allArticles$:Observable<Article[]>; 

public getAllArticles(limit:number = 100):Observable<Article[]> 
    { 
    if(!this.allArticles$) 
    { 
     this.allArticles$ = this.af.database.list("/articles/", { 
     query: { 
      limitToFirst: limit 
     } 
     }).map((arts) => { 


     return arts.map(art => { 
      let unpacked = Article.unpack(art); 
      return unpacked; 
     }) 
     }).publishReplay(1).refCount(); 
    //for all new subscriptions replay emitted values 
    } 
    return this.allArticles$; 
    }