使用 mat-menu 作为上下文菜单：如何关闭打开的 mat-menu，并在另一个位置打开它

Question

角度：v8.2.8

我设法使用 mat-menu (angular material) 来模拟上下文菜单。无论如何在我的页面上右键单击，菜单会出现在我的鼠标位置。

我想要实现的目标：当我将鼠标移动到页面上的另一个位置时，我再次右键单击。我期待原始位置的菜单在新位置关闭并重新打开。

但实际上：当我右键单击时，没有任何反应，原始位置的菜单保持打开状态。

事实上，我必须左键单击以关闭原始位置打开的菜单，然后右键单击以在新鼠标位置打开菜单。

问题：知道如何实现我想要的吗？

@Component({
  selector: 'fl-home',
  template:`
 <mat-menu #contextmenu>
      <div >
           <button mat-menu-item>Clear all Paths</button>
       </div>
  </mat-menu>
  <div [matMenuTriggerFor]="contextmenu" [style.position]="'absolute'" [style.left.px]="menuX" [style.top.px]="menuY" ></div>
  
  <div class="container" (contextmenu)="onTriggerContextMenu($event);"> ....</div>
`})
export class HomeComponent  {

    menuX:number=0
    menuY:number=0

    @ViewChild(MatMenuTrigger,{static:false}) menu: MatMenuTrigger; 
    
   
    onTriggerContextMenu(event){
        
      event.preventDefault();
      this.menuX = event.x - 10;
      this.menuY = event.y - 10;
      this.menu.closeMenu() // close existing menu first.
      this.menu.openMenu()

    }
}

Answer 1

只需添加hasBackdrop=false如<mat-menu ... [hasBackdrop]="false">. 发生的情况是，当我右键单击后打开菜单时，会出现一个不可见的背景覆盖层覆盖整个页面。无论我尝试再次右键单击什么，上下文菜单事件都不会触发，因此onTriggerContextMenu()不会被调用。通过设置hasBackgrop为 false，该叠加层将不会出现。