Вы можете создать для этого простой канал:
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-адрес загрузки и соедините его с конвейером asyn c следующим образом:
<img *ngIf="firestoreObject.image.croppedSource | firestoagePath | async as imageSource"
[src]="imageSource">
в этом примере firestoreObject - это случайный объект с изображением, которое имеет строковый путь к местоположению файла обрезанного изображения на firestorage.