有没有一种简单的方法可以从 Angular 模板中的 firebase-storage 路径获取下载 url答案

【问题标题】：Is there a simple way to get the download url from firesbase-storage paths in Angular templates有没有一种简单的方法可以从 Angular 模板中的 firebase-storage 路径获取下载 url
【发布时间】：2020-11-24 03:37:41
【问题描述】：

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

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

所以我在收到的每个模板上都做了什么，我必须获取 downloadUrl 以及下载 url 的组件代码。有没有办法避免这种情况，直接在模板文件中。所以我不需要操作简单的显示数据，其中包含要存储的图像参考。

【问题讨论】：

标签： angular firebase-storage angularfire2

【解决方案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 上裁剪图像文件位置的字符串路径。

【讨论】：