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

【问题标题】：How to listen to mousemove inside angular material dialog component?如何在角度材质对话框组件中收听mousemove？
【发布时间】：2019-05-30 00:44:49
【问题描述】：

在我的应用程序中需要一直跟踪鼠标移动。

在 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 元素并包装整个应用程序，像这样：

当对话框打开时，事件侦听器会在后台（调用以打开对话框的组件）的组件上侦听鼠标事件，而不是在对话框本身中。

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

【问题讨论】：

标签： javascript angular angular-material

【解决方案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 事件处理程序中，您可以查看可能通过共享服务发出需要的数据，从而利用其他组件/服务（例如订阅）的BehaviorSubjects 等RxJS 主题。

这里有一个example 正在运行。请注意，mousemove 事件仅在鼠标位于模态框范围内时触发。

希望对您有所帮助！

【讨论】：

【解决方案2】：

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

【讨论】：