Данные кэширования данных о вспышках не должны дублировать запросы. Angular2 with angularfire2

Question

Я получаю наблюдаемый список объектов из firebase, а затем подписаться на него (через async pipe) в моем компоненте. Пока все работает отлично. Список только перезагружается, когда что-то меняется.

//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 маршрутизатор и перемещаться из маршрута, а затем обратно - кажется, что все-таки данные загружаются еще раз от firebase, который создает задержку рендеринга и трафика накладные расходы.

Я предполагаю, что это происходит, потому что, когда я перемещаюсь, а затем обратно, подписка воссоздается и запрашиваются данные, как если бы она еще не была загружена.

Итак, я думал, что было бы способом избежать такого поведения? Может быть кеширование, может быть что-то другое. На данный момент не совсем уверен.

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