にメニューを表示することに成功しました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>
これを行うには、メニューボタンを<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();
}
}
材料V6：
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加