鼠标离开时材质对话框关闭(角度材质) [英] 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()' > 我在组件的哪里定义了这些功能:

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
 })
}

还有

  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(与出现对话框的同时) 我真的不知道会发生什么.我只想有一个弹出窗口，当悬停某些东西时，该弹出窗口会消失.

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.

推荐答案

看来您的mouseover和mouseleave触发器在items的列表中，但是，一旦打开Angular Material对话框，也会打开覆盖层，例如:

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> 

其中z-indez为1000且可能与您的商品重叠，因此mouseleave不会被触发，因为该商品上方现在还有另一个DOM元素.

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.

对于您想要的内容，我建议您查看工具提示或弹出窗口(通常相对于元素相对放置)，而不要查看对话框.否则，每次您在item元素顶部打开一个对话框时，鼠标离开时该对话框都不会自动关闭.

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屋！