有没有一种简单的方法可以从 Angular 模板中的 firebase 存储路径下载 url

Question

我见过这样的例子，人们将实际的下载路径保存到 firestore 中，然后在模板中使用该图像图像。

但是我不太确定这是保存文件位置的正确方法。出于简单的原因，在检索下载 url 时它包含令牌，我假设这是针对当前用户获取下载 url.

因此，我在收到的每个模板上所做的工作是，我必须获取包含用于下载的组件代码的 downloadUrl url。有没有办法避免这种情况，直接在模板文件中使用它。所以我不需要操作简单的显示数据，它包含 firestorage 的图像引用。

Answer 1

您可以为此创建一个简单的管道：

import { Pipe, PipeTransform } from '@angular/core';
import { AngularFireStorage } from '@angular/fire/storage';
import { Observable, from } from 'rxjs';

@Pipe({
   name: 'firestoagePath'
})
export class FirestoagePathPipe implements PipeTransform {
    constructor(private storage: AngularFireStorage) { }
    transform(value: string, ...args: unknown[]): Observable<string> {
      if (typeof (value) === 'string') {
          const storageRef = this.storage.ref(value);
          return storageRef.getDownloadURL();
      }
      return from(value);
   }
}

使用管道，您可以对 firestore 进行注入，这很好，下载 url 并将其与异步管道链接，如下所示：

<img *ngIf="firestoreObject.image.croppedSource | firestoagePath | async as imageSource"
    [src]="imageSource">

在此示例中，firestoreObject 是一个随机对象，其图像具有指向 firestorage 上裁剪图像文件位置的字符串路径。

有没有一种简单的方法可以从 Angular 模板中的 firebase 存储路径下载 url

Is there a simple way to get the download url from firesbase-storage paths in Angular templates

firebase-storage

angularfire2

angular