web-dev-qa-db-ja.com

Rxjs、fromEventで複数のイベントを処理する

Rxjs 5.1で同じDOMノードで複数のイベントを処理する最良の方法は何ですか？

fromEvent($element, 'event_name')が、一度に1つのイベントしか指定できません。

ハンドルが欲しいscroll wheel touchmove touchendイベント。

angularrxjs5rxjs-dom
11
user3130446

注：これはRxJS v5用です。 v6の同等物については、この回答の最後をご覧ください。

Rx.Observable.merge 複数の監視可能なストリームを単一のストリームにマージする機能：

// 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$
);

それが少し肥大化しているように思える場合は、イベント用の配列を作成して少し整理し、その配列をObservableオブジェクトにマップします。これは最適ですifある時点で関連するオブザーバブルを個別にイベントを参照する必要がない場合：

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

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

1つのサブスクリプションですべてのイベントを処理できるようになりました。

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

RxJS v6を更新

RxJS 6では、スタンドアロンの merge および fromEvent v5の静的メソッドと同等の関数をインポートし、同じ方法で使用できます。 ：

import { fromEvent, merge } from 'rxjs';

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

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

これは私がイベントを結合する方法です：

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

これは、RxJの最新バージョンでこれを実装する方法です。

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