Material Dialog Close on mouseleave (angular material)

问题

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.

回答1:

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.

回答2:

You are forgot to add () on the closeAll method. So you need to use:

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

or add reference to the opened dialog:

public dialogRef: MatDialogRef;

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

and then close it using:

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

来源：https://stackoverflow.com/questions/56291254/material-dialog-close-on-mouseleave-angular-material

标签

angular

dialog

angular-material2