材料2 如何在鼠标输入上打开md菜单

Question

我正在使用材料 2 创建一个菜单。我有一个 md 按钮触发器，可以打开一个 md 菜单。我希望按钮在悬停时打开。我知道材料 Angular.io 仍然很新。我已经用谷歌搜索了这个问题，但我只是想出了 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>

普伦克演示

对于您的代码，它将是：

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