angular - Rxjs：对Typescript的角度可拖动矩形差异鼠标响应

Question

我正在使用 RxJS 和 Angular 玩一个可拖动矩形的示例，但我不明白为什么在 Typescript 的情况下鼠标响应比 Angular 更好。*注意：我认为问题在于 Angular 让我在矩形外执行 MouseUp，而 Typescript 不会发生这种情况

一定有什么我错过了。还有什么我应该考虑的吗？

我试图在互联网上查找它，我刚刚找到了如何使用 cdk 库或更复杂的 rxjs 操作符来做到这一点。我的第一个意图是像现在一样简单地构建它。任何想法？

这是我的例子：

• 打字稿：https ://stackblitz.com/edit/rectangle-drag-angular
• 角度：https ://stackblitz.com/edit/rectangle-drag-ts

我在这里粘贴每个代码，以防有人喜欢它：

打字稿示例：

draggable: HTMLElement;

let draggable = <HTMLElement>document.querySelector("#draggable");

let mouseDown$ = fromEvent<MouseEvent>(draggable, "mousedown");
let mouseMove$ = fromEvent<MouseEvent>(document, "mousemove");
let mouseUp$ = fromEvent<MouseEvent>(document, "mouseup");

mouseDown$.subscribe(() => {
  mouseMove$
    .pipe(
      map(event => {
        event.preventDefault();
        return {
          x: event.clientX,
          y: event.clientY
        };
      }),
      tap(console.log),
      takeUntil(mouseUp$)
    )
    .subscribe(pos => {
      // Draggable is absolutely positioned
      draggable.style.left = pos.x + "px";
      draggable.style.top = pos.y + "px";
    });
});

角度示例：

export class AppComponent implements AfterViewInit, OnInit {
  draggable: HTMLElement;
  mouseDown$: Observable<MouseEvent>;
  mouseMove$: Observable<MouseEvent>;
  mouseUp$: Observable<MouseEvent>;


  ngOnInit() {
    this.draggable = <HTMLElement>document.getElementById("draggable");
    this.mouseDown$ = fromEvent<MouseEvent>(this.draggable, "mousedown");
    this.mouseMove$ = fromEvent<MouseEvent>(this.draggable, "mousemove");
    this.mouseUp$ = fromEvent<MouseEvent>(this.draggable, "mouseup");
  }

  ngAfterViewInit() {
    this.mouseDown$.subscribe(() => {
      this.mouseMove$
        .pipe(
          map(event => {
            event.preventDefault();
            return {
              x: event.clientX,
              y: event.clientY
            };
          }),
          tap(console.log),
          takeUntil(this.mouseUp$)
        )
        .subscribe(pos => {
          this.draggable.style.left = pos.x + "px";
          this.draggable.style.top = pos.y + "px";
        });
    });
  }

标签： angulartypescriptrxjsresponsedrag