材质对话框在鼠标离开时关闭(角度材质) [英] Material Dialog Close on mouseleave (angular material)

问题描述

我使用 Angular Material 创建了一个对话框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,{数据: {someData: item.data})}

和

 closeDialog(){console.log("关闭");this.dialog.closeAll;}

这是我的对话框定义:

@Component({选择器:'项目对话框'，templateUrl: 'item-dialog.html',})导出类 ItemDialog {构造函数(@Inject(MAT_DIALOG_DATA)公共数据:DialogData){}ngOnInit() {}

当我将鼠标悬停在项目上时，会弹出对话框.但是，当我离开它时，它不会消失(我必须在按钮外单击才能使其消失.)更重要的是，当我悬停鼠标时会出现console.log(与对话框同时出现)我真的不知道会发生什么.我只是想有一个弹出窗口，它在悬停某些东西时出现和消失.

解决方案

看起来你的 mouseover 和 mouseleave 触发器在 items 列表中code>，然而，Angular Material 对话框一旦打开，也会打开一个叠加层，例如:

其中具有 1000 的 z-indez 并且可能与您的项目重叠，因此不会触发 mouseleave，因为有现在在项目顶部的另一个 DOM 元素.

对于您想要的，我建议查看工具提示或弹出框(通常相对于元素定位)，而不是对话框.否则，每次在 item 元素上打开对话框时，它都不会在鼠标离开时自动关闭.

I created a dialog using Angular Material https://material.angular.io/components/dialog/overview I open it here <td *ngFor="let item of items; let i = index" on-mouseover='openDialog(item)' on-mouseleave='closeDialog()' > Where in component I have definition of those functions:

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

And

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

  }

This is my dialog definition:

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

ngOnInit() {
}

When I hover mouse over the item, the dialog pops up. However when I leave it, it does not dissapear (I have to click outside the button to make it vanish.) What is more, console.log appears when I hover mouse (At the same time as dialog appears) I really do not know what happens. I just wanted to have a popup which appears and disappears when hovering something.

解决方案

it seems like your mouseover and mouseleave triggers are in the list of items, however, Angular Material dialog, once open, will also open an overlay layer, something like:

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

Which has a z-indez of 1000 and probably overlaps your items, so the mouseleave wont't be triggered, since there is another DOM element on top of the item now.

For what you want, I suggest looking into tooltips or popovers (which usually are relative positioned to the element), instead of dialogs. Otherwise, everytime you open a dialog on top of your item element, it will not close automatically on mouse leave.

这篇关于材质对话框在鼠标离开时关闭(角度材质)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！