Angular 5 http.get 进入 BehaviorSubject 以在客户端多播数据更改

Question

我有一个使用 restful wcf web 服务的 angular 5 网站。反过来，Web 服务与与数据库对话的业务对象进行交互。我正在使用 @angular/common/http 模块将 Web 服务消费到一个可观察的对象中，然后在网页上呈现。到目前为止一切顺利。

现在，我还通过网络服务更新数据库，这也能正常工作。

但是，它有点慢，我希望能够在更新 Web 服务调用的同时直接更新 Observable，这样网站就不必等待数据通过 Web 服务，通过极其缓慢的企业资源规划业务对象，到数据库，然后返回到 Observable 对象，通过异步管道更新屏幕。

所以，我心想，为什么不直接用 BehaviorSubjects 替换 Observables 呢？然后，我可以只使用 BehaviorSubject 上的“next”方法来快速更新页面。

但是，当我尝试...

public cartons$: BehaviorSubject<ICartonTrackDetail[]>;
this.cartons$ = this.cartonService.getCartonsObservable();

我收到这个错误...

Type 'Observable<ICartonTrackDetail[]>' is not assignable to type 'BehaviorSubject<ICartonTrackDetail[]>'.
  Property '_value' is missing in type 'Observable<ICartonTrackDetail[]>'.```

现在，这个错误是有道理的，但它让我退后一步想知道:实现我的目标的最佳方法是什么？

Answer 1

您想要一个可以让您将客户端更新注入(inject)流中的主题，并且您希望将这个主题与从服务器流式传输数据的可观察对象合并。

像这样:

private clientStream$ : Subject<ICartonTrackDetail[]>;

public cartons$ : Observable<ICartonTrackDetail[]>;

// setup
const serverStream = this.cartonService.getCartonsObservable();
this.clientStream$ = new Subject<ICartonTrackDetail[]>();
this.cartons$ = serverStream.merge(this.clientStream$);

// when you get new data to send to server:
this.clientStream$.next(newData);
.. add code to send newData to server like normal ..

现在任何订阅 cartons$ 的代码都将在您调用 clientStream$.next(newData) 时收到更新