代码之家 › 专栏 › 技术社区 › Rob

从RXJS5升级到RXJS6

rxjs6 angular6 rxjs5 observable angular5

0

Rob · 技术社区 · 8 年前

我在从RXJS5升级到版本6时遇到问题。我有以下代码:

  private captureEvents(canvasEl: HTMLCanvasElement) {

    Observable
      .fromEvent(canvasEl, 'mousedown')
      .switchMap((e) => {
        return Observable
          .fromEvent(canvasEl, 'mousemove')
          .takeUntil(Observable.fromEvent(canvasEl, 'mouseup'))
          .pairwise()
      })
      .subscribe((res: [MouseEvent, MouseEvent]) => {
        const rect = canvasEl.getBoundingClientRect();

        const prevPos = {
          x: res[0].clientX - rect.left,
          y: res[0].clientY - rect.top
        };

        const currentPos = {
          x: res[1].clientX - rect.left,
          y: res[1].clientY - rect.top
        };

        this.drawOnCanvas(prevPos, currentPos);
      });
  }

但是当我升级到RXJS6时,我会得到以下错误:

类型“typeof observable”上不存在属性“fromEvent”。

我试图改变我从这个(rxjs5)中导入的内容:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/takeUntil';
import 'rxjs/add/operator/pairwise'; 
import 'rxjs/add/operator/switchMap';

为此(RXJS6):

import { Observable, fromEvent } from 'rxjs';
import { switchMap, takeUntil, pairwise } from 'rxjs/operators';

这是我升级代码的最佳尝试:

  private captureEvents(canvasEl: HTMLCanvasElement) {

    const obsMouseDown = fromEvent(canvasEl, 'mousedown').pipe(
      switchMap((e) => {
        const obsMouseMove = fromEvent(canvasEl, 'mousemove').pipe(
          takeUntil(a => {
            const obsMouseUp = fromEvent(canvasEl, 'mouseup').pipe(
              pairwise()
            );
            return obsMouseUp;
          }));

        return obsMouseMove;
      }))
      .subscribe((res: [MouseEvent, MouseEvent]) => {
        const rect = canvasEl.getBoundingClientRect();

        const prevPos = {
          x: res[0].clientX - rect.left,
          y: res[0].clientY - rect.top
        };

        const currentPos = {
          x: res[1].clientX - rect.left,
          y: res[1].clientY - rect.top
        };

        this.drawOnCanvas(prevPos, currentPos);
      });
  }

但这不起作用-我收到一个“takeuntil”代码的错误:

类型为'(a:any)=>observable<[事件,事件]>'的参数不是可分配给“Observable”类型的参数

请在此处输入原始代码示例:
https://embed.plnkr.co/QSvJxi/

3 回复 | 直到 8 年前

1

Taha Zgued 8 年前

const mousedown$ = fromEvent(pauseButton, 'mousedown');
const mouseup$ = fromEvent(resumeButton, 'mouseup');
const mousemove$ = fromEvent(resumeButton, 'mousemove');

mousedown$.pipe(
    switchMap(res => {
       mousemove$.pipe(//Whatever Operators and subscribitions to other events).subscribe(...)
    }),
    map(// Whatever you want back from your event)
  ).subscribe(...)

switchMap takeUntil

2

1

Taha Zgued 8 年前

fromEvent

const source = fromEvent(document, 'click');

import { fromEvent } from 'rxjs';

3

1

Mark Hughes 8 年前

private captureEvents(canvasEl: HTMLCanvasElement) {

    const obsMouseDown = fromEvent(canvasEl, 'mousedown').pipe(
        switchMap((e) => {
            return fromEvent(canvasEl, 'mousemove').pipe(
              takeUntil(a => fromEvent(canvasEl, 'mouseup')),
              pairwise()
            ));
        }))
        .subscribe((res: [MouseEvent, MouseEvent]) => {
            // snip
        });
}