时间戳

首页 > 解决方案 > 从 RxJS5 升级到 RxJS6

angular5 - 从 RxJS5 升级到 RxJS6

问题描述

我在从 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<[Event, Event]>' 类型的参数不能分配给'Observable' 类型的参数

plnkr 原始代码示例：
https ://embed.plnkr.co/QSvJxi/

标签： angular5observablerxjs5angular6rxjs6

解决方案

fromEvent

Now 已经是 Observable 类型了。您不需要将它链接到 Observebal，而是可以直接调用它并将其影响到变量或更好的 const。如下所示：

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

至于导入，你想对了

import { fromEvent } from 'rxjs';

推荐阅读