javascript - 如何在 Angular Material 对话框组件内监听鼠标移动？

Question

在我的应用程序中，我需要始终跟踪鼠标移动。

在 app.component.ts 文件中，我放置了以下代码:

ngOnInit() {
document.addEventListener("mousemove", (e) => {
  //foo() 
 });
})

除了对话框内部之外，一切都按预期工作。

该对话框是 Angular Material Dialog component以及创建它的代码如下:

openModal() {
    const dialogRef = this.dialog.open(ModalComponent, {
      panelClass: 'generic-dialog-container',
      data: {
        header: 'Leave session',
        content:
          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
        isInfo: false,
      },
    });

    this.dialogSub = dialogRef.componentInstance.isApprove.subscribe(
      isApprove => {
        if (isApprove) {
          this.navigateBack();
        }
      },
    );
  }

我尝试在模态的 OnInit 中添加事件监听器 - 不起作用，另外我看到当我将其添加到文档的 app.component.ts 中时，监听器被添加到 body 元素并包装整个应用程序，如下所示:

当对话框打开时，事件监听器会监听后台组件(调用打开对话框的组件)处的鼠标事件，但不会监听对话框本身中的鼠标事件。

关闭对话框然后重新打开它后，事件监听器也会按预期监听对话框内的鼠标事件。

Answer 1

您可以使用HostListener监听 ModalComponent 中的 mousemove 事件:

import { Component, Inject, HostListener } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

// ...

export class ModalComponent {

  constructor(
    public dialogRef: MatDialogRef<ModalComponent>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) { }

  @HostListener('mousemove', ['$event'])
  handleMousemove(event) {
    console.log(`x: ${event.clientX}, y: ${event.clientY}`);
  }
}

在 mousemove 事件处理程序中，您可以根据需要通过共享服务发出数据，利用 RxJS 主题，例如其他组件/服务的 BehaviorSubjects例如订阅。

这是一个example在行动中。请注意，mousemove 事件仅在鼠标位于模式范围内时触发。

希望有帮助!