时间戳

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

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

问题描述

角度：v8.2.8

我设法使用 mat-menu（角度材料）来模拟上下文菜单。在我的页面上右键单击，菜单出现在我的鼠标位置。

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

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

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

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

@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()

    }
}

标签： angularangular-materialcontextmenu

解决方案

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

推荐阅读