如何在有角材质对话框组件中收听mousemove？

Question

在我的应用程序中，Ineed始终跟踪鼠标的运动。

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

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

除了对话框中的所有内容，其他所有内容均按预期工作。

该对话框是Angular Material对话框组件 ，其创建代码如下：

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 ，通过共享服务根据需要发出数据。

这是一个实际的例子 。 请注意，仅当鼠标位于模式范围内时，才会触发mousemove事件。

希望有帮助！

Answer 2

我将避免使用document对象添加侦听器，而是使用fromEvent运算符创建一个Observable。 至于对话框，Angular Material可能会干扰事件传播。 尝试观察一下，看看会发生什么。