Question

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

Answer 1

您的mouseover和mouseleave触发器似乎在items的列表中，但是，“ Angular Material”对话框一旦打开，也会打开一个覆盖层，例如：< / p>

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

其中z-indez中的1000可能与您的项目重叠，因此mouseleave不会被触发，因为现在项目顶部还有另一个DOM元素。 / p>

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

Answer 2

您忘记在()方法上添加closeAll。因此，您需要使用：

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

或添加对打开的对话框的引用：

public dialogRef: MatDialogRef;

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

，然后使用以下命令将其关闭：

closeDialog(){
  console.log("close");
  this.dialogRef.close();
}

鼠标离开时材质对话框关闭（角度材质）

2 个答案: