Question

我正在使用Material 2来创建菜单。我有一个md按钮触发器打开一个md菜单。我希望按钮在悬停时打开。我知道Material Angular.io仍然很新。我已经用Google搜索了问题，但我想出了Angularjs的结果。有人能指出我正确的方向吗？

以下是我的html示例：

    <button md-button [mdMenuTriggerFor]="userMenu" class="nav-btn" ><i class="fa fa-user" aria-hidden="true" id="user-icon"></i> NAME</button>
    <md-menu #userMenu="mdMenu" xPosition="before" yPosition="below" [overlapTrigger]="false">
        <button md-menu-item class="nav-dropdown" [routerLink]="['/dashboard']">DASHBOARD</button>
        <button md-menu-item class="nav-dropdown">MY PROFILE</button>
        <button md-menu-item class="nav-dropdown">lOGOUT</button>
    </md-menu>

Answer 1

您可以通过在mouseenter上手动触发openMenu()方法来完成此操作。

示例：

<button md-icon-button 
        [md-menu-trigger-for]="menu" 
        #menuTrigger="mdMenuTrigger" 
        (mouseenter)="menuTrigger.openMenu()"
        style="margin-right: 25px">
  <md-icon>more_vert</md-icon>Menu 1
</button>

<md-menu #menu="mdMenu">
  <button md-menu-item>
    <md-icon>dialpad</md-icon>
    <span>Redial</span>
  </button>
  <button md-menu-item disabled>
    <md-icon>voicemail</md-icon>
    <span>Check voicemail</span>
  </button>
  <button md-menu-item>
    <md-icon>notifications_off</md-icon>
    <span>Disable alerts</span>
  </button>
</md-menu>

Plunker demo

对于您的代码，它将是：

<button md-button #menuTrigger="mdMenuTrigger" 
                  (mouseenter)="menuTrigger.openMenu()"
                  [mdMenuTriggerFor]="userMenu" 
                  class="nav-btn" >
  <i class="fa fa-user" aria-hidden="true" id="user-icon"></i> 
  NAME
</button>

Material2如何在mouseenter上打开md-menu

1 个答案: