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

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来监听mousemove中的ModalComponent事件：

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

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

希望有帮助！

Answer 2

我将避免使用文档对象添加侦听器，而是使用let triggerDistance = $(document).height() - $(window).height() - 50; let OriginalItems = $(".item").length; $(window).scroll(function() { let scrolledDistance = $(window).scrollTop(); if ( scrolledDistance > triggerDistance) { var randomItem = Math.floor(Math.random() * OriginalItems); var clonedItem = $("#item_"+randomItem).clone(); clonedItem.removeAttr('id'); clonedItem.appendTo("html"); } }); 运算符创建一个Observable。至于对话框，Angular Material可能会干扰事件传播。尝试观察一下，看看会发生什么。