Angular 角度材质2如何关闭mouseleave上的md菜单

我正在使用Angular Material 2创建带有md菜单组件的菜单。 我想在鼠标离开时关闭菜单。

---

有人能给我指出正确的方向吗？

您可以利用中的

closeMenu（）

方法，在鼠标左键执行它，如下所示：

<button md-button [mdMenuTriggerFor]="menu">Menu</button>
<md-menu #menu="mdMenu" (mouseleave)="menu.closeMenu()">
  <button md-menu-item>Item 1</button>
  <button md-menu-item>Item 2</button>
</md-menu>

菜单
项目1
项目2

应该可以使用。

您可以使用MaterialMenuTigger中的closeMenu（），但如果只是在菜单上输入，则该功能将不起作用。如果你在所有的按钮上都有一个空格，并在空格上加上（鼠标移动），它就会起作用

我对这个问题的解决办法是

<button md-button [mdMenuTriggerFor]="menu">Menu</button>
<md-menu #menu="mdMenu" >
  <span (mouseleave)="trigger.closeMenu()>
    <button md-menu-item>Item 1</button>
    <button md-menu-item>Item 2</button>
  </span>
</md-menu>
<button mat-button [matMenuTriggerFor]="menu" #trigger="matMenuTrigger">Menu</button>

菜单
将其添加到全局角度样式中。（
.scss
）

将其添加到组件类：

  @ViewChild(MatMenuTrigger) menuTrigger: MatMenuTrigger;

...

  closeMenu() {
    this.menuTrigger.closeMenu();
  }

创建如下所示的HTML菜单：
（将“mouseleave”类添加到
mat菜单
元素中。）


1.
2.
3.
4.
这不起作用，因为Angular在呈现菜单mat菜单内容时从DOM中删除宿主元素的方式具有padding top和padding bottom:8px，使用此方法可以获得非常时髦的行为，其中菜单可能会闪烁mat菜单mouseleave事件在Angular/material中不起作用--6.3.1
  @ViewChild(MatMenuTrigger) menuTrigger: MatMenuTrigger;

...

  closeMenu() {
    this.menuTrigger.closeMenu();
  }

  <mat-menu class="mouseleave" #menu="matMenu">
    <div (mouseleave)="closeMenu()">
      <button mat-menu-item>1</button>
      <button mat-menu-item>2</button>
      <button mat-menu-item>3</button>
      <button mat-menu-item>4</button>
    </div>
  </mat-menu>