手动向可观察对象发出值

Question

我在 Angular 6 应用程序中使用 rxjs，并且我正在构建一个组件，该组件具有 downloadUrl: Observable<string>，当我从 firebase 存储中获取 url 时会填充该组件。

我需要分配一个初始值，该值使用@Input attribute (@Input imagesrc:string) 传递给组件，并且我尝试将一个值发送到downloadurl （在ngOnInit 中）：

let emitter;
this.downloadURL = Observable.create(e => emitter = e)
emitter.next(this.imagesrc);

但是，这是不正确的，因为我收到了 emitter 未定义的控制台错误消息。我如何能够手动将 imagesrc 的值发送到 downloadURL？

Answer 1

我不太了解你的实现。

假设这是你的FileService：

import { AngularFireStorage } from '@angular/fire/storage';
import { Injectable } from '@angular/core';
import { from, Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class FileService {

  constructor(private storage: AngularFireStorage) { }

  upload(path: string, file: File): Observable<string> {
    return from(this.storage.upload(path, file))
      .pipe(switchMap(_ => this.storage.ref(path).getDownloadURL()));
  }

  delete(downloadUrl) {
    return this.storage.storage.refFromURL(downloadUrl).delete();
  }

}

假设你想暴露一个初始值为this.imagesrc的Observable，然后一旦你得到下载url，你想更新这个Observable的值，你可以试试下面的方法：

private emitter: BehaviorSubject<string> = new BehaviorSubject<string>('');
emitter$: Observable<string> = this.emitter.asObservable();
...
constructor(private fileService: FileService) {}
...
ngOnChanges() {
  this.emitter.next(this.imagesrc);
}
...
functionWhereYouAreExpectingDownloadUrl() {
  ...
  this.fileService.upload(pathToStoreTheFileAt, fileToStore)
    .subscribe(downloadUrl => this.emitter.next(downloadUrl));
}

在这里，我们创建了一个BehaviorSubject<string>，可以使用this.imagesrc 进行初始化。但是我们保留了这个private 并公开了这个asObservable。然后，一旦我们得到downloadUrl，我们就会在发射器上调用next，将新值推送到我们的emitter$Observable