手动向可观察的值发送值

Question

我正在使用角度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