上下文菜单事件都会打开默认上下文菜单并触发事件

Question

我正在尝试打开mat-menu，右键单击一个对象。我的代码是：

<div class="component-div" fxLayout="column" fXLayoutAlign="center space-between" (contextmenu)="onRightClick($event)">        
  <div class="header-title">
      <button mat-button class="xs-btn" (click)="addObject()">Add Object</button>
      <button mat-button class="xs-btn" (click)="addBranch()">Add Branch</button>
      <button mat-button class="xs-btn" (click)="addLabel()">Add Label</button>
      <button mat-button class="xs-btn" (click)="addText()">Add Text</button>
   </div>

<div class="content-div" #graphContainer id="graphContainer" (contextmenu)="onRightClick($event)">
      <button mat-button [matMenuTriggerFor]="menu" id="menuBtn" style="display:none;"></button>
      <mat-menu #menu="matMenu" (close)="onMenuClosed()">
          <button class="menuOpnBtn" mat-menu-item *ngFor="let opn of addTextToOpns" (click)="editCell(opn)">
              {{ opn }}
          </button>
      </mat-menu>
</div>
</div>

它看起来像这样：mat-menu打开很好，但也是默认菜单：

我将不胜感激任何帮助。

我有另一个问题：我如何知道菜单所指的项目？

TX

Answer 1

Mat-menu is a floating panel containing list of options。要打开mat-menu，右键单击不是选项。由于它是一个简单的下拉列表，因此您只能单击鼠标左键。

如果你使用Context menu，你可以实现你所需要的

https://www.primefaces.org/primeng/#/contextmenu

Answer 2

我找到了！所有需要做的就是添加：

event.preventDefault();

在onRightClick（event：any）方法中。