Question

我正在尝试使用mat-menu构建上下文菜单，我觉得我非常接近。我希望菜单弹出用户右键单击的位置。问题是它会弹出用户最后右键单击的位置，而不是当前右键单击的位置。我该如何解决这个问题？

HTML：

.context-menu-trigger { position: absolute }

CSS：

...
@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();
    }
}

TS：

>>> np.ravel_multi_index([1, 2, 0, 1, 2], (3, 3, 2, 2, 3))
65

我们目前在@angular 4.4和@ angular / material 2.0.0-beta.12。

Answer 1

我遇到了这个并通过延迟trigger.openMenu（）在样式位置发生后发现修复

Observable.timer（100）.subscribe（t =＆gt; {this.menuTrigger.openMenu（）}）;

Answer 2

依靠超时是不安全的。为跨度触发器设置直接样式，以获取即时位置更新：

<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();
  }

Answer 3

我将event.layerX和event.layerY用于menuLeft和menuTop

Answer 4

我使用此代码解决了菜单位置问题（在Angular 8中对我有效）：

    setTimeout(() => {
      this.menuTrigger.openMenu();
    }, 200);

使用mat-menu作为上下文菜单：正确定位

4 个答案: