Чтение значения наблюдаемой переменной без повторного запуска назначенной функции

Question

В настоящее время у меня есть функция в моем угловом компоненте, которая запускается всякий раз, когда я хочу загрузить список файлов.

Я хочу проследить за процессом загрузки, чтобы затем очистить список файлов иотслеживать ход загрузки для индикатора выполнения.

Моя текущая проблема заключается в том, что когда я запрашиваю значение uploadProgress, он повторно запускает this.pictureService.upload(this.selectedFiles) и загружает файлы дважды.

Myфункция в настоящее время выглядит так:

uploadImages() {
  // Upload picture and save progress to observable
  const uploadProgress: Observable<HttpEvent<HttpUploadProgressEvent>> = this.pictureService.upload(this.selectedFiles);

  // Create snackbar with observable for progress bar
  this.snackBar.openFromComponent(UploadProgressComponent, {
    data: { uploadProgress },
  });

  // Wait for uploading to be finished and then clear selected files and preview URLs
  uploadProgress.subscribe((event: HttpUploadProgressEvent) => {
    if (event.loaded === event.total && event.loaded !== undefined) {
      this.selectedFiles = null;
      this.previewUrls = [];
    }
  });
}

Answer 1

Как предложил Мартин, я добавил .pipe(share()) в конце своей константы, и теперь она работает как задумано.

Мой код теперь выглядит так:

uploadImages() {
  // Upload picture and save progress to observable
  const uploadProgress = this.pictureService.upload(this.selectedFiles).pipe(share());

  // Create snackbar with observable for progress bar
  this.snackBar.openFromComponent(UploadProgressComponent, {
    data: { uploadProgress },
  });

  // Wait for uploading to be finished and then clear selected files and preview URLs
  uploadProgress.subscribe((event: HttpUploadProgressEvent) => {
    if (event.loaded === event.total && event.loaded !== undefined) {
      this.selectedFiles = null;
      this.previewUrls = [];
    }
  });
}

Answer 2

каждый раз, когда вы вызываете .subscribe, вызывается наблюдаемая (см. здесь .)

Если вы делаете это в функции openFromComponent, рассмотрите возможность не вызывать .subscribe второй раз, но что-то вроде этого:

uploadImages() {
// Upload picture and save progress to observable
const uploadProgress: Observable<HttpEvent<HttpUploadProgressEvent>> = this.pictureService.upload(this.selectedFiles);

// Create snackbar with observable for progress bar
this.snackBar.openFromComponent(UploadProgressComponent, {
  data: {
    uploadProgress.pipe(tap((event: HttpUploadProgressEvent) => {
      if (event.loaded === event.total && event.loaded !== undefined) {
        this.selectedFiles = null;
        this.previewUrls = [];
      }
    }))
  }
})

}