緩存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$; 
    }