缓存firebase数据以避免重复请求。使用angularfire2的Angular2
缓存firebase数据以避免重复请求。使用angularfire2的Angular2
提问于 2017-01-14 20:44:23
我从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路由器并从路由导航出去然后返回时，似乎所有相同的数据都是从firebase再次加载的，这造成了渲染延迟和流量开销。
我猜这是因为当我导航出去然后回来时，订阅被重新创建，数据被询问是否已经加载。
所以，我在想，怎样才能避免这种行为呢？可能是缓存，也可能是其他东西。目前还不是很确定。
回答 1
Stack Overflow用户
发布于 2017-01-14 21:20:17
解决了！这篇文章帮助很大：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$;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41650108
复制相关文章
相似问题
腾讯云开发者
