在 .ts 代码中获取 Observable 值

Question

我正在使用 Angularfire2 上传和下载图片。但是在删除getDownloadURL() 之后，我就被困在这里了。

import { finalize } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: `
    <input type="file" (change)="uploadFile($event)" />
    <div>{{ uploadPercent | async }}</div>
    <a [href]="downloadURL | async">{{ downloadURL | async }}</a>
 `
})
export class AppComponent {
  uploadPercent: Observable<number>;
  downloadURL: Observable<string>;
  constructor(private storage: AngularFireStorage) {}
  uploadFile(event) {
    const file = event.target.files[0];
    const filePath = 'name-your-file-path-here';
    const fileRef = this.storage.ref(filePath);
    const task = this.storage.upload(filePath, file);

    // observe percentage changes
    this.uploadPercent = task.percentageChanges();
    // get notified when the download URL is available
    task.snapshotChanges().pipe(
        finalize(() => this.downloadURL = fileRef.getDownloadURL() )
     )
    .subscribe()
  }
}

我在 HTML 页面中得到了downloadURL，但是如何进入函数内部呢？

Answer 1

您必须订阅 this.downloadURL Observable 才能获取 url 字符串。 HTML 中的“异步”管道基本上是在做同样的事情。发出值后立即订阅和更新值。

但您必须确保 this.downloadRef 不为空。因此，在您的代码示例中，它必须进入 finalize 函数。

 task.snapshotChanges().pipe(
    finalize(() => {
       this.downloadURL = fileRef.getDownloadURL();
       this.downloadURL.subscribe(url => console.log(url) );
    })
 )

但我不确定最终确定是否是正确的功能。此代码仅在第一次发射后 snapshotChanges Observable 完成或出错时才有效。但我需要有关背景的更多信息才能获得更详细的答案。