Question

我正在使用Angular Material 2创建一个带有md-menu组件的菜单。我想在鼠标离开时关闭菜单。有人能指出我正确的方向吗？

Answer 1

您可以使用MaterialMenuTigger中的closeMenu（），但如果您只是在菜单上放置它将不起作用。如果你围绕所有按钮包裹一个跨度并将（mouseleave）添加到spann它将起作用。

我对这个问题的解决方案是。

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

Answer 2

将此添加到您的全局Angular样式。（.scss）

.mat-menu-panel {
  &.mouseleave {
    .mat-menu-content {
      padding: 0;
      > div {
        padding-top: 8px;
        padding-bottom: 8px;
      }
    }
  }
}

将此添加到您的组件类：

  @ViewChild(MatMenuTrigger) menuTrigger: MatMenuTrigger;

...

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

创建一个这样的HTML菜单：（将班级＆＃34; mouseleave＆＃34;添加到mat-menu元素。）

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

Answer 3

您可以利用Material Menu API中的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>

应该工作。

Angular Material 2如何在mouseleave上关闭md-menu

3 个答案: