如何为整个应用加载带有订阅的Firestore请求

Question

我正在开发一个带有angular和firestore的应用程序，它要求从整个应用程序的文档中实时加载所有数据。

也就是说，当我到达主页时，我需要这些数据，在相同的配置文件上，等等……大约需要7、8页。

我的这段代码运行得很好：

服务中：

getMyUser() {
 this.usersCollection.doc<User>(this.authentificationService.getUid()).valueChanges().subscribe(result => 
 {
   return result;
 });
}

在组件中：

this.userData = this.usersService.getMyUser();

但是，每次我进入不同的页面时，都会发出请求。如果浏览8个需要此数据的页面，它将发出8个请求。我想找到一种解决方案，使服务中的实时数据仅发出一次请求，然后在我的8个不同页面中显示数据。

有解决方案吗？

感谢您的帮助。

Answer 1

在服务中将变量设置为与getUser调用的结果相等，然后从服务中获取变量，而不是调用getUser。

Answer 2

shareReplay应该适用于您提到的用例。您可以按照this guide进行操作，我也会留下一个简单的示例。

import { Observable } from 'rxjs/Observable';
import { shareReplay, map } from 'rxjs/operators';

const CACHE_SIZE = <SIZE_FOR_YOUR_CACHE>;

////////
your additional code

//////////

private cache$: Observable<Array<User>>;

getMyUser() {
   if (!this.cache$) {
      this.cache$ = this.requestMyUser().pipe(
        shareReplay(CACHE_SIZE)
      );
   }
   return this.cache$; 
}

requestMyUser(){
   this.usersCollection.doc<User> 
   (this.authentificationService.getUid()).valueChanges().subscribe(result => 
      {
         return result;
   });
}

/////
Rest of your code

/////