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

发布时间：2020-12-17 17:36:58 所属栏目：安全来源：网络整理

导读：我正在尝试使用mat-menu构建一个上下文菜单,我觉得我非常接近.我希望菜单弹出用户右键单击的位置.问题是它会弹出用户最后右键单击的位置,而不是它们当前右键单击的位置.我该如何解决？ HTML： span #contextMenuTrigger [matMenuTriggerFor]="contextMenu" c

我正在尝试使用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.

解决方法

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

Observable.timer(100).subscribe(t => {this.menuTrigger.openMenu()});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!