从RxJS5升级到RxJS6

Question

从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时，会出现以下错误：

属性'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‘的参数不能分配给“可观测”类型的参数

以下是原始代码的plnkr示例：

https://embed.plnkr.co/QSvJxi/

Answer 1

由于某种原因，你的建议对我没有用，但我会尽力给出答案。我觉得你应该先做两件事。尝试初始化您的可观测值，这样就更容易调用它们并订阅它们，如下所示：

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

第二件事，您现在应该使用Rxjs 5& 6 (类似于Rxjs 5&6)来引导您的操作符，并订阅所有事件。

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。由于Rxjs中的许多语法正在发生变化，所以不要回避文档，没有什么比这更好了。

Answer 2

fromEvent 

现在已经是可以观察到的类型了。你不需要链它到一个观察者，相反，你可以直接调用它，并影响它的变量或更好的康斯特。如下所示：

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

至于进口，你认为是对的

import { fromEvent } from 'rxjs';

Answer 3

我认为你实际上非常接近，我认为你的管道太深了-记住你可以把你需要的尽可能多的操作员链在一个管道里，所以你的内部鼠标移动直到鼠标向上的开关图应该看起来更像这样：

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
        });
}