RxJs 操作符的管道

Question

我尝试学习 RxJs。我想用它来拖放对象。我设法做到了。但我正在创建以下drag$ Observable：

const drag$ = mousedown$.pipe(
      switchMap((start) => {
        return merge(
          mousemove$.pipe(
            map((move) => {
              move.preventDefault();
              return {
                type: "move",
                x: move.x - start.x,
                y: move.y - start.y,
              };
            }),
            takeUntil(mouseup$)
          ),
          mouseup$.pipe(
            map((endPos) => {
              return {
                type: "end",
                x: endPos.clientX,
                y: endPos.clientY,
              };
            }),
            take(1)
          )
        );
      })
    );

困扰我的是，我将merge 运算符用作接收两个可观察对象作为参数的运算符。在管道内执行合并时，是否有一种优雅的方式来重新定义相同的 drag$ 运算符？

Answer 1

也许您可以使用mergeWith operator（自 RxJS 7.x AFAIK 起可用）：

const drag$ = mousedown$.pipe(
  switchMap((start) =>
    mousemove$.pipe(
      map((move) => {
        move.preventDefault();
        return {
          type: "move",
          x: move.x - start.x,
          y: move.y - start.y,
        };
      }),
      takeUntil(mouseup$),
      mergeWith(
        mouseup$.pipe(
          map((endPos) => {
            return {
              type: "end",
              x: endPos.clientX,
              y: endPos.clientY,
            };
          }),
          take(1)
        )
      )
    )
  )
);