Получить изображения из хранилища Firebase, используя Angular 7

Question

Я не могу отобразить изображения, хранящиеся в моем хранилище Firebase в моем приложении Angular 7.Как это сделать без использования службы и простого извлечения изображений из корня хранилища в компоненте, а затем зациклить в html.

Я уже пробовал разные способы получения URL-адреса для загрузки, но они не работают.Другие методы требуют использования службы, которую я не хотел бы делать в этом случае.

Компонент

import { Component, OnInit } from '@angular/core';
import { AngularFireStorage, AngularFireStorageReference } from '@angular/fire/storage';
import { Observable } from 'rxjs'

@Component({
  selector: 'app-imageviewer',
  templateUrl: './imageviewer.component.html',
  styleUrls: ['./imageviewer.component.css']
})

export class ImageviewerComponent implements OnInit {
  images: Observable<any[]>;

  constructor(private storage: AngularFireStorage) {
    storage.ref("/").getDownloadURL().subscribe(downloadURL => {
      this.images = downloadURL;

    });
   }
}

HTML

        <div class="gal-list-view">
          <div style="margin: 20px">
              <div class="responsive" style="margin: 20px">
                  <div class="gallery" *ngFor="let image of images | async">
                    <a target="_blank">
                      <img src="{{image.url}}" alt="" width="600" height="400">
                    </a>
                    <div class="desc">Img Title</div>
                  </div>
              </div>         
          </div>
        </div>

Я хотел бы просто увидетьизображения отображаются, но на странице ничего не отображается.Если я нахожусь на странице 1 и щелкаю ссылку, чтобы перейти на страницу, показывающую галерею изображений, она показывает только пустую страницу, а ссылка остается страницей 1. Но когда я вынимаю 'storage.ref ("/"). GetDownloadURL() .subscribe (downloadURL => {this.images = downloadURL; `Страница 1 переходит в галерею изображений.

Answer 1

Использование сервиса рекомендуется для реализации любой сложной логики.Это делает угловое приложение более модульным, а также предоставляет многократно используемые методы.

Вы можете использовать следующий код для загрузки изображений в Firebase Storage и получения downloadUrl каждогозагрузить одновременно.

export class UploadService {
  private basePath = '/images';
  file: File;
  url = '';

  constructor(private afStorage: AngularFireStorage) { }

  handleFiles(event) {
    this.file = event.target.files[0];
  }

  //method to upload file at firebase storage
  async uploadFile() {
    if (this.file) {
      const filePath = `${this.basePath}/${this.file.name}`;    //path at which image will be stored in the firebase storage
      const snap = await this.afStorage.upload(filePath, this.file);    //upload task
      this.getUrl(snap);
    } else {alert('Please select an image'); }
  }

  //method to retrieve download url
  private async getUrl(snap: firebase.storage.UploadTaskSnapshot) {
    const url = await snap.ref.getDownloadURL();
    this.url = url;  //store the URL
    console.log(this.url);
  }
}

Теперь эту ссылку URL можно использовать в любом месте для отображения изображения.

Я бы порекомендовал использовать сервис для реализации этого.по причинам, указанным выше.Не стесняйтесь комментировать, если что-то не ясно.