Material Dialog Закрыть при отпуске мышью (угловой материал) - PullRequest
Новая
       8

Material Dialog Закрыть при отпуске мышью (угловой материал)

0 голосов
/ 24 мая 2019

Я создал диалог, используя угловой материал https://material.angular.io/components/dialog/overview Я открываю его здесь <td *ngFor="let item of items; let i = index" on-mouseover='openDialog(item)' on-mouseleave='closeDialog()' > Где в компоненте у меня есть определение этих функций: 

openDialog(item:Item) {
this.dialog.open(ItemDialog,{
  data: {
    someData: item.data
 })
}

И 

  closeDialog(){
    console.log("close");
    this.dialog.closeAll;

  }

Это мое диалоговое определение: 

@Component({
  selector: 'item-dialog',
  templateUrl: 'item-dialog.html',
})
export class ItemDialog {
  constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}

ngOnInit() {
}

Когда я наводю указатель мыши на элемент, появляется диалоговое окно.Однако, когда я оставляю его, он не исчезает (я должен нажать за пределами кнопки, чтобы он исчез.) Более того, console.log появляется, когда я наведу курсор мыши (В то же время, когда появляется диалоговое окно), я действительно не знаючто просходит.Я просто хотел, чтобы всплывающее окно появлялось и исчезало при наведении курсора.

1 Ответ

2 голосов
/ 24 мая 2019

кажется, что ваши триггеры mouseover и mouseleave находятся в списке items, однако, открыв диалоговое окно Angular Material, вы также откроете оверлейный слой, что-то вроде: 

<div class"cdk-overlay-backdrop cdk-overlay-dark-backdrop cdk-overlay-backdrop-showing"></div>

Который имеет z-indez из 1000 и, вероятно, перекрывает ваши предметы, поэтому mouseleave не будет срабатывать, поскольку теперь над элементом есть еще один элемент DOM.

Для того, что вы хотите, я предлагаю просматривать всплывающие подсказки или всплывающие окна (которые обычно расположены относительно элемента), а не диалоги. В противном случае, каждый раз, когда вы открываете диалоговое окно поверх элемента item, оно не закрывается автоматически при отпускании мыши.

...