时间戳

首页 > 解决方案 > Rxjs, fromEvent 处理多个事件

angular - Rxjs, fromEvent 处理多个事件

问题描述

我正在尝试组合多个事件blur并keyup (enter key only)使用fromEvent. 我已经实现了模糊事件，我也可以结合 keyup.enter 。

我已经尝试使用filter操作员但使用过滤器，输入正在工作 onblur 不是 -

组件.ts

this.propertyDescription.forEach((input: ElementRef) => {
    const events = ['blur', 'keyup'];
    from(events)
    .pipe(
        takeUntil(this.unsubscribe$),
        mergeMap((event) =>
            fromEvent(input.nativeElement, event)
        ),
        filter((e: KeyboardEvent) => e.key === 'Enter'),
        map((evt: any) => evt.target.value),
        distinctUntilChanged(
            (pre: any, curr: any) =>
                JSON.stringify(pre) === JSON.stringify(curr)
            )
        )
        .subscribe((caption: string) => {
            console.log(caption);
        });
});

标签： angularrxjs

解决方案

  1. a 内的订阅forEach是一个不雅的设计。它会导致多个（可能未处理的）订阅。你可以使用mergewith Array#map。

  2. from也可以使用merge多个fromEvents而不是使用。

尝试以下

const events = ['blur', 'keyup'];

merge(
  this.propertyDescription.map((input: ElementRef) =>
    merge(
      events.map((event: string) => 
        fromEvent(input.nativeElement, event).pipe(
          map((evt: any) => evt.target.value),
          distinctUntilChanged((pre: any, curr: any) =>
            JSON.stringify(pre) === JSON.stringify(curr)
          )
        )
      )
    )
  )
).pipe(
  takeUntil(this.unsubscribe$)
).subscribe((caption: string) => {
  console.log(caption);
});

推荐阅读