在RxJS中组合不同类型的Observable，但只发出来自其中一个的值

Question

I have a BehaviorSubject, and two EventEmitters. I need to create an Observable that returns the latest value of the BehaviorSubject every time there is a new value emitted by the BehaviorSubject or there is an Event emitted by any of the EventEmitters. Basically, I don't care about the value of the event being emitted by the EventEmitters, they should just be a trigger to push out the latest value of the BehaviorSubject.

Here is an example:

 import Rx from 'rxjs'; import {map} from 'rxjs/operators' import {EventEmitter} from '@angular/core' const bSubject = new Rx.BehaviorSubject('value1'); const emitter1 = new EventEmitter(); const emitter2 = new EventEmitter(); // Should I be using something othere than merge to create the Observable? // Is merge ok but I should be using a special operator? const myOberservable = Rx.merge(bSubject, emitter1, emitter2) myOberservable.subscribe({next: value => console.log(value)}); emitter1.emit('event1'); bSubject.next('value2'); emitter2.emit('event2'); bSubject.next('value3'); /** * It prints: * value1 * event1 * value2 * event2 * value3 * * But I want it to print: * value1 * value1 * value2 * value2 * value3 */ 

Answer 1

Combine merge , withLatestFrom and map . BTW I've updated snippet to enable tree-shaking.

import { merge, BehaviorSubject } from 'rxjs';
import { withLatestFrom, map } from 'rxjs/operators'
import {EventEmitter} from '@angular/core'

const bSubject = new BehaviorSubject('value1');
const emitter1 = new EventEmitter();
const emitter2 = new EventEmitter();

const merged = merge(bSubject, emitter1, emitter2);
const myOberservable = merged.pipe(withLatestFrom(bSubject), map(x => x[1]));

myOberservable.subscribe({ next: value => console.log(value) });

emitter1.emit('event1');
bSubject.next('value2');
emitter2.emit('event2');
bSubject.next('value3');

Answer 2

Sounds like a perfect case of switchMap . I had to use startWith because of the way switchMap works, which only subscribes to the inner Observable once the outer Observable emits a value, therefore you wouldn't actually subscribe to bSubject until emitter1 emits the first value. To overcome that, I used startWith which provides an initial value for the Observable .

 import { EventEmitter } from '@angular/core'; import { BehaviorSubject, merge } from 'rxjs'; import { startWith, switchMap } from 'rxjs/operators'; const initialValue = 'value1'; const bSubject = new BehaviorSubject(initialValue); const emitter1 = new EventEmitter(); const emitter2 = new EventEmitter(); const myOberservable = merge(emitter1, emitter2).pipe(switchMap(() => bSubject), startWith(initialValue)); myOberservable.subscribe({next: value => console.log(value)}); emitter1.emit('event1'); bSubject.next('value2'); emitter2.emit('event2'); bSubject.next('value3'); /** * It prints: * value1 * value1 * value2 * value2 * value3 */ 

For further reading, refer to this .