我正在尝试使用 mat-menu 构建一个上下文菜单,我觉得我已经非常接近了。我希望用户右键单击时弹出菜单。问题在于它是在用户上次右键单击的位置弹出的,而不是他们当前右键单击的位置。我该如何解决这个问题?
HTML:
<span #contextMenuTrigger [matMenuTriggerFor]="contextMenu" class="context-menu-trigger" [style.left.px]="menuLeft" [style.top.px]="menuTop"></span>
<div (contextmenu)="openContextMenu($event)> stuff that I want right-click available to goes here</div>
<mat-menu #contextMenu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
CSS:
.context-menu-trigger { position: absolute }
TS:
...
@Component( ... )
export class AppComponent {
@ViewChild(MatMenuTrigger) public menuTrigger : MatMenuTrigger;
public menuLeft = 0;
public menuTop = 0;
...
openContextMenu(event) {
event.preventDefault();
this.menuLeft = event.x;
this.menuTop = event.y;
this.menuTrigger.openMenu();
}
}
我们目前使用的是 @Angular 4.4 和 @Angular/Material 2.0.0-beta.12。
依赖超时并不安全。 为跨度触发器设置直接样式以获得即时位置更新:
<span style="position:fixed;" #spanTrigger class="context-menu-trigger" #matTrigger="matMenuTrigger" [matMenuTriggerFor]="contextMenu"></span>
<div (contextmenu)="openContextMenu($event, matTrigger, spanTrigger)"> stuff that I want right-click available to goes here</div>
<mat-menu #contextMenu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
处理者:
openContextMenu(
event: MouseEvent,
trigger: MatMenuTrigger,
triggerElement: HTMLElement
) {
triggerElement.style.left = event.clientX + 5 + "px";
triggerElement.style.top = event.clientY + 5 + "px";
if (trigger.menuOpen) {
trigger.closeMenu();
trigger.openMenu();
} else {
trigger.openMenu();
}
event.preventDefault();
}
我遇到了这个问题,并通过延迟在样式位置发生后发生trigger.openMenu() 找到了解决方案
Observable.timer(100).subscribe(t => { this.menuTrigger.openMenu() });
我将 event.layerX 和 event.layerY 用于 menuLeft 和 menuTop
我使用此代码来解决菜单位置问题(在 Angular 8 中适用于我):
setTimeout(() => {
this.menuTrigger.openMenu();
}, 200);