angular - 使用 Angular 材质菜单的流畅上下文菜单行为？

Question

我正在尝试使用 mat-menu 作为上下文菜单。右键单击视图时，我可以打开菜单。代码如下。

模板：

    <!-- The context trigger view. (The actual view) -->
    <div (contextmenu)="onContext($event)">
        Content here
    </div>

    <!-- The hidden view that menu originates from -->
    <div style="visibility: hidden; position: fixed;"
         [style.left]="contextPosition.x"
         [style.top]="contextPosition.y"
         #contextTrigger
         [matMenuTriggerFor]="contextMenu"></div>

    <!-- The menu iteself -->
    <mat-menu #contextMenu="matMenu" [hasBackdrop]="true">
      <ng-template matMenuContent>
        <button mat-menu-item>Move</button>
        <button mat-menu-item>Rename</button>
      </ng-template>
    </mat-menu>

零件：

    contextPosition = { x: '0', y: '0' }

    @ViewChild('contextTrigger', { read: MatMenuTrigger })
    protected contextTrigger: MatMenuTrigger;

    onContext(event: MouseEvent) {
      event.preventDefault();

      // Save location
      this.contextPosition.x = event.clientX + 'px';
      this.contextPosition.y = event.clientY + 'px';

      // Open menu
      this.contextTrigger.openMenu();
    }

堆栈闪电战

我正在尝试实现流畅的上下文菜单行为，类似于许多程序所拥有的。我怎样才能实现它？

有背景的行为-没有背景的行为-我想要的行为

此外，我尝试使用这个和这个包。然而，每个人都有自己的问题。目前，如果我能让它工作，我更喜欢 Material Menu 组件。

标签： angularangular-material