Angular 获取.ts代码中的可观察值

我使用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()
  }
}

从“rxjs/operators”导入{finalize}；
@组成部分({
选择器：'应用程序根'，
模板：`
{{uploadPercent}异步}
`
})
导出类AppComponent{
上传百分比：可见；
下载URL：可观察；
构造函数（专用存储：AngularFireStorage）{}
上载文件（事件）{
const file=event.target.files[0]；
const filePath='在此处命名文件路径'；
const fileRef=this.storage.ref（文件路径）；
const task=this.storage.upload（文件路径，文件）；
//观察百分比变化
this.uploadPercent=task.percentageChanges（）；
//下载URL可用时收到通知
task.snapshotChanges（）.pipe(
完成（（）=>this.downloadURL=fileRef.getDownloadURL（））
)
.subscribe（）
}
}

---

我正在HTML页面中获取

下载url

，但是如何进入函数？

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

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

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

---

但我不确定finalize是否是正确的函数。此代码仅在快照更改完成或第一次发射后出现错误时有效。但是我需要更多关于背景的信息来获得更详细的答案。

订阅fileRef.getDownloadURL（），因为它返回一个可观察值，并且您可以在函数中获得值。没问题。RxJS在一开始可能相当困难。但一旦你掌握了窍门，你就会爱上它；）你好，我有类似的问题。之后如何以反应形式传递此.downloadURL？