我成功地将菜单显示在mouseenter
上。我现在要做的是让它在菜单本身的mouseleave
事件中消失。有关如何实现这一目标的任何想法?
<button mat-button [mat-menu-trigger-for]="menu"
#menuTrigger="matMenuTrigger" (mouseenter)="menuTrigger.openMenu()">
TRIGGER BUTTON
</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false"
(mouseleave)="menuTrigger.closeMenu()">
<button mat-menu-item [routerLink]="['sources']">
<mat-icon>view_headline</mat-icon>
MENU CHOICE
</button>
</mat-menu>
答案 0 :(得分:7)
您可以通过将菜单按钮包装在<span>
元素中来执行此操作:
<强> HTML:
<button mat-button
[matMenuTriggerFor]="menu"
(mouseenter)="openMyMenu()">
Trigger
</button>
<mat-menu #menu="matMenu" overlapTrigger="false">
<span (mouseleave)="closeMyMenu()">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</span>
</mat-menu>
<强>组件:
export class MenuOverviewExample {
@ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
openMyMenu() {
this.trigger.openMenu();
}
closeMyMenu() {
this.trigger.closeMenu();
}
}
<小时/> 演示(V5):
材料V6: