Rxjs：对 Typescript

如何解决Rxjs：对 Typescript

我正在用 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
            };
          }),takeuntil(this.mouseUp$)
        )
        .subscribe(pos => {
          this.draggable.style.left = pos.x + "px";
          this.draggable.style.top = pos.y + "px";
        });
    });
  }