Как прослушать перемещение мышью внутри углового материала диалогового компонента?

Question

В моем приложении Ineed для постоянного отслеживания движения мыши.

В файле app.component.ts я поместил следующий код:

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

Все работает как положенокроме того, внутри диалога.

Диалог представляет собой Компонент Angular Material Dialog и код его создания выглядит следующим образом:

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 вы можете посмотреть, как передавать данные каквозможно, через общую службу, использующую такие субъекты RxJS, как BehaviorSubjects, на которые подписываются другие компоненты / службы, такие как.

Вот пример в действии.Обратите внимание, что событие mousemove срабатывает только тогда, когда мышь находится в пределах модальной зоны.

Надеюсь, это поможет!

Answer 2

Я бы не использовал объект документа для добавления прослушивателей, а вместо этого создал бы Observable с оператором fromEvent.Что касается диалога, Angular Material может мешать распространению событий.Попробуйте Observable и посмотрите, что произойдет.