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

Question

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

1. 是否可以将其中一个 Firestore 查询转变为一项服务？
2. 如果是这样，这是否意味着在使用相同服务的不同页面( Angular 组件)之间导航时，数据仅读取一次？
3. 仅当通过可观察对象在 firestore 中修改数据时，查询才会再次运行吗？ ("return Observable.create(observer => {")

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

任何帮助将不胜感激。

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

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

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

我会做这样的事情:

// 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 中更新时，由于您使用了可观察对象，您的应用程序将自动获取该数据。

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

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

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