AngularFire / Firestore - 作为服务返回集合和文档

Question

我有几个页面引用了 firestore 中的同一个节点，每个页面都从 firestore 节点中提取不同的段。例如，摘要页面可能会显示专辑标题、日期、流派和图像，而另一个页面可能只会显示标题、艺术家和唱片公司。几个问题：

1. 是否可以将其中一个 firestore 查询转换为服务？
2. 如果是这样，这是否意味着在使用相同服务的不同页面（角度组件）之间导航时只读取一次数据？
3. 只有在通过 observable 在 Firestore 中修改数据时，查询才会再次运行？ ("return Observable.create(observer => {")

我已尝试使用以下代码提供服务。但是，观察到的问题是在页面刷新时，数据不存在。但是，它在浏览该站点时存在。我相信这是因为我的页面在 observable 返回之前正在运行。有没有办法将查询包装为可观察对象？

任何帮助将不胜感激。

getAlbumData() {
  this.albumDoc = this.afs.doc(`albums/${this.albumId}`);
  this.album = this.albumDoc.snapshotChanges();
  this.album.subscribe((value) => {

    // The returned Data
    const data = value.payload.data();

    // Firebase Reference
    var storage = firebase.storage();

    // If album cover exists
    if (data.project_signature != undefined) {

      // Get the Image URL
      var image = data.album_cover_image;

      // Create an image reference to the storage location
      var imagePathReference = storage.ref().child(image);

      // Get the download URL and set the local variable to the result (url)
      imagePathReference.getDownloadURL().then((url) => {
        this.album_cover = url;
      });
    }
  });
}

Answer 1

当我构建我的 observables 时，我会尽可能多地使用运算符，直到我获得想要在我的 UI 中显示的数据。

您不想在 subscribe 方法中实现太多代码，因为这样做会破坏反应式范式。 相反，在您的 observable 中提取数据并将其显示在您的模板中。 不要忘记在您的应用程序获取数据时使用模板中的异步管道来显示您的数据。

我会这样做：

// In AlbumService
getAlbumCover(albumId: string) {
    const albumDoc = this.afs.doc(`albums/${albumId}`);
    const album_cover$ = this.albumDoc.snapshotChanges().pipe(
      // get the album data from firestore request
      map(data => {
        return {
          id: data.payload.id,
          ...data.payload.data()
        };
      }),
      // emits data only if it contains a defined project_signature
      filter(album => album.project_signature),
      // prepare the imagePath and get the album cover from the promise
      mergeMap(album => {
        const storage = firebase.storage();
        const image = album.album_cover_image;
        const imagePathReference = storage.ref().child(image);
        return imagePathReference.getDownloadURL();
      })
    );
    return album_cover$;
  }

通过这样做，当您的数据在 firestore 中更新时，您的应用程序会自动获取数据，因为您使用的是 observable。

在您的组件中，在从 url 获取专辑 ID 后的 onInit() 方法中： this.album_cover$ = this.albumService.getAlbumCover(albumId);

最后，在我的模板中，我会这样做：

<div>{{album_cover$ | async}}</div>