Как прослушать mousemove внутри компонента диалогового окна углового материала?
В моем приложении нужно постоянно отслеживать движение мыши.
В файле 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 в документ, прослушиватель добавляется к элементу тела и обертывает все приложение, так:
Когда диалоговое окно открыто, прослушиватель событий прослушивает события мыши на компоненте в фоновом режиме (компонент, который вызывает открытие диалогового окна), но не в самом диалоговом окне.
После закрытия диалогового окна и его повторного открытия прослушиватель событий прослушивает события мыши также внутри диалогового окна, как и ожидалось.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я бы не стал использовать объект документа для добавления слушателей, а вместо этого создал бы Observable с оператором fromEvent. Что касается диалога, Angular Material может мешать распространению событий. Попробуйте Observable и посмотрите, что произойдет.
Вы можете использовать Хост-слушатель для прослушивания событий 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.info(`x: ${event.clientX}, y: ${event.clientY}`);
}
}
Изнутри обработчика событий mousemove вы можете искать данные по мере необходимости, возможно, через общую службу, используя в своих интересах темы RxJS, такие как BehaviorSubjects, на которые подписаны другие компоненты/службы.
Вот пример в действии. Обратите внимание, что событие mousemove срабатывает только тогда, когда мышь находится в пределах модального окна.
Надеюсь, это поможет!