Rxjs, fromEvent para manejar múltiples eventos

Queremos proponerte la mejor respuesta que hallamos en internet. Queremos que te sea útil y si deseas aportar algún detalle que nos pueda ayudar a crecer hazlo libremente.

Solución:

Nota: Esto es para RxJS v5. Vea la parte inferior de esta respuesta para el equivalente v6.

---

Puedes usar el Rx.Observable.merge función para fusionar múltiples flujos observables en un solo flujo:

// First, create a separate observable for each event:
const scrollEvents$    = Observable.fromEvent($element, 'scroll');
const wheelEvents$     = Observable.fromEvent($element, 'wheel');
const touchMoveEvents$ = Observable.fromEvent($element, 'touchmove');
const touchEndEvents$  = Observable.fromEvent($element, 'touchend');

// Then, merge all observables into one single stream:
const allEvents$ = Observable.merge(
    scrollEvents$,
    wheelEvents$,
    touchMoveEvents$,
    touchEndEvents$
);

Si eso parece un poco inflado, podríamos limpiar un poco creando un array para los eventos, y luego mapear eso array a los objetos observables. esto funciona mejor si no necesita hacer referencia a los eventos a sus observables asociados por separado en algún momento:

const events = [
    'scroll',
    'wheel',
    'touchmove',
    'touchend',
];

const eventStreams = events.map((ev) => Observable.fromEvent($element, ev));
const allEvents$ = Observable.merge(...eventStreams);

Ahora puede manejar todos los eventos con una sola suscripción:

const subscription = allEvents$.subscribe((event) => 
    // do something with event...
    // event may be of any type present in the events array.
);

---

Actualizar RxJS v6

En RxJS 6 puede importar el independiente merge y fromEvent funciones equivalentes a las static métodos en v5, y utilícelos de la misma manera:

import  fromEvent, merge  from 'rxjs';

const scrollEvents = fromEvent($element, 'scroll');
// creating other input observables...

const allEvents$ = merge(
    scrollEvents$,
    wheelEvents$,
    touchMoveEvents$,
    touchEndEvents$
);

Así es como prefiero combinar eventos:

fromEvents(dom, "scroll", "wheel", "touch", "etc...");
function fromEvents(dom, ...eventNames: string[]) 
    return eventNames.reduce(
        (prev, name) => Rx.merge(prev, fromEvent(dom, name)),
        Rx.empty()
    );

Así es como implementaría esto en la versión más nueva de RxJs

const events = ['scroll', 'resize', 'orientationchange']
from(events)
  .pipe(
    mergeMap(event => fromEvent($element, event))
  )
  .subscribe(
    event => // Do something with the event here
  )

Sección de Reseñas y Valoraciones

Recuerda algo, que te permitimos valorar esta reseña si diste con el hallazgo.

---

---

Utiliza Nuestro Buscador