使用Angular Material的matMenu作为上下文菜单

Question

使用Angular Material的matMenu作为上下文菜单

5

我很久以前就试图解决如何使用matMenu作为上下文菜单，在某人在我的元素上右键单击时触发。

这是我的菜单：

<mat-menu #contextMenu="matMenu">
   <button mat-menu-item>
      <mat-icon>table_rows</mat-icon>
      <span>Select Whole Row</span>
      <span>⌘→</span>
   </button>
   <button mat-menu-item>
      <mat-icon>functions</mat-icon>
      <span>Insert Subtotal</span>
      <span>⌃S</span>
   </button>
</mat-menu>

我希望能够在右键单击此元素时触发菜单：

<div tabindex=0 *ngIf="!hasRowFocus" 
                class="display-cell" (keydown)="onSelectKeyDown($event)" 
                (click)=selectCellClick($event) 
                (dblclick)=selectCellDblClick($event)
                (contextmenu)="openContextMenu()"
                [ngClass]='selectClass'
                (mouseover)="mouseover()"
                (mouseout)="mouseout()"
           
                #cellSelect >
     <div (dragenter) = "mouseDragEnter($event)" (dragleave) = "mouseDragLeave($event)">{{templateDisplayValue}}</div>
</div>

然而，根据文档，我需要指定这个div应该有[matMenuTriggerFor]指令，这样当右键单击触发openContextMenu()时，我可以获取到触发元素的引用，然后调用triggerElement.trigger()来生成菜单。

问题是，设置[matMenuTriggerFor]似乎自动连接到了点击事件，而不是右键单击事件，所以无论我在元素上左键单击还是右键单击，上下文菜单都会打开，这不是期望的行为。

我已经看到类似此Stackblitz中的解决方法，它创建一个隐藏的div作为触发元素，但需要提供x和y坐标来定位菜单元素，这似乎不太理想。

是否有任何方法可以在输入元素上右键单击而无需创建虚拟元素来托管matMenuTriggerFor指令？

- GGizmos

扩展MatMenuTrigger并覆盖装饰器？ - Petr Averyanov

4个回答

3

也许您可以使用CSS pointer-events: none;，并像这样将[matMenuTriggerFor]="contextMenu"包装在列表中。

<p>Right-click on the items below to show the context menu:</p>
<mat-list>
    <mat-list-item *ngFor="let item of items" (contextmenu)="onContextMenu($event, item)">
    <div [matMenuTriggerFor]="contextMenu" style="pointer-events: none;">{{ item.name }}</div>
    </mat-list-item>
</mat-list>
<mat-menu #contextMenu="matMenu">
    <ng-template matMenuContent let-item="item">
        <button mat-menu-item (click)="onContextMenuAction1(item)">Action 1</button>
        <button mat-menu-item (click)="onContextMenuAction2(item)">Action 2</button>
    </ng-template>
</mat-menu>

这里有一个演示

但它不是首选方案。我认为你应该使用弹出层（overlay）替代菜单。

- ttquang1063750

谢谢，这很有帮助，但我不能禁用我的指针事件，因为（click）和（hover）以及其他一些事件也是我应用程序中元素的触发器，而我需要这个上下文菜单。然而，我能够通过添加一个虚拟元素来适应您的解决方案，当上下文菜单被点击时，该虚拟元素会自动点击触发器。 - GGizmos

2

这是我找到的解决方案。上下文菜单将在光标位置打开。

创建一个名为ContextMenuComponent的组件。

    import { Component, HostBinding } from '@angular/core';
import { MatMenuTrigger } from '@angular/material/menu';

@Component({
  selector: 'app-context-menu',
  template: '<ng-content></ng-content>',
  styles: ['']
})
export class ContextMenuComponent extends MatMenuTrigger {

  @HostBinding('style.position') private position = 'fixed';
  @HostBinding('style.pointer-events') private events = 'none';
  @HostBinding('style.left') private x: string;
  @HostBinding('style.top') private y: string;

  // Intercepts the global context menu event
  public open({ x, y }: MouseEvent, data?: any) {

    // Pass along the context data to support lazily-rendered content
    if(!!data) { this.menuData = data; }

    // Adjust the menu anchor position
    this.x = x + 'px';
    this.y = y + 'px';

    // Opens the menu
    this.openMenu();
    
    // prevents default
    return false;
  }
}

在您想要的位置上使用下面的上下文菜单

<app-context-menu [matMenuTriggerFor]="main" #menu>
        
    <mat-menu #main="matMenu">
    
        <ng-template matMenuContent let-name="name">
    
          <button mat-menu-item>{{ name }}</button>
          <button mat-menu-item>Menu item 1</button>
          <button mat-menu-item>Menu item 2</button>
    
          <button mat-menu-item [matMenuTriggerFor]="sub">
            Others...
          </button>
    
        </ng-template>
    
      </mat-menu>
    
      <mat-menu #sub="matMenu">
        <button mat-menu-item>Menu item 3</button>
        <button mat-menu-item>Menu item 4</button>
      </mat-menu>
        
        </app-context-menu>
    
    <section fxLayout="column" fxLayoutAlign="center center" (contextmenu)="menu.open($event, { name: 'Stack Overflow'} )">
    
      <p>Try to right click and see how it works!</p>
      <p>You do whatever you want here...</p>
    
    </section>

- Janith Widarshana

0

似乎无法将(click)与触发MatMenuTrigger分离，除非完全禁用鼠标事件，但在我的应用程序中无法这样做，因为需要上下文菜单的同一元素还需要响应点击、悬停和拖动事件。但是虚拟元素方法可以简化，并且不需要提供位置信息，如以下示例所示，该示例改编自ttQuants在他有用的答案中的stackblitz示例。

export class ContextMenuExample {
  items = [
    { id: 1, name: "Item 1" },
    { id: 2, name: "Item 2" },
    { id: 3, name: "Item 3" }
  ];
  @ViewChildren(MatMenuTrigger)
  contextMenuTriggers: QueryList<MatMenuTrigger>;
  
  onContextMenu(event: MouseEvent, item: Item, idx : number) { 
    event.preventDefault();
    this.contextMenuTriggers.toArray()[idx].openMenu();  
  }

  onContextMenuAction1(item: Item) {
    alert(`Click on Action 1 for ${item.name}`);
  }

  onContextMenuAction2(item: Item) {
    alert(`Click on Action 2 for ${item.name}`);
  } 
}

export interface Item {
  id: number;
  name: string;
}

模板：

<p>Right-click on the items below to show the context menu:</p>
<mat-list>
    <mat-list-item *ngFor="let item of items; let idx=index">
       <div (contextmenu)="onContextMenu($event, item, idx)">{{item.name}}
          <div [matMenuTriggerFor]="contextMenu" style="visibility: hidden; 
             pointer-events: none;">{{ item.name }}
          </div>
       </div>
    </mat-list-item>
</mat-list>
<mat-menu #contextMenu="matMenu">
    <ng-template matMenuContent let-item="item">
        <button mat-menu-item (click)="onContextMenuAction1(item)">Action 1</button>
        <button mat-menu-item (click)="onContextMenuAction2(item)">Action 2</button>
    </ng-template>
</mat-menu>

- GGizmos

这个不起作用。如果你在其他地方右键单击，它不会关闭菜单... - kottartillsalu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- snesin · Accepted Answer

幸运的是，可以在此处找到 matMenuTriggerFor 的代码: https://github.com/angular/components/blob/master/src/material/menu/menu-trigger.ts 如果您查看文件底部的 MatMenuTrigger 类，很容易覆盖相同的基类，进行一些技巧操作，并自己创建 matContextMenuTriggerFor 指令。

import { Directive, HostListener, Input } from "@angular/core";
import { MatMenuPanel, _MatMenuTriggerBase } from "@angular/material/menu";
import { fromEvent, merge } from "rxjs";

// @Directive declaration styled same as matMenuTriggerFor
// with different selector and exportAs.
@Directive({
  selector: `[matContextMenuTriggerFor]`,
  host: {
    'class': 'mat-menu-trigger',
  },
  exportAs: 'matContextMenuTrigger',
})
export class MatContextMenuTrigger extends _MatMenuTriggerBase {

  // Duplicate the code for the matMenuTriggerFor binding
  // using a new property and the public menu accessors.
  @Input('matContextMenuTriggerFor')
  get menu_again() {
    return this.menu;
  }
  set menu_again(menu: MatMenuPanel) {
    this.menu = menu;
  }

  // Make sure to ignore the original binding
  // to allow separate menus on each button.
  @Input('matMenuTriggerFor')
  set ignoredMenu(value: any) { }

  // Override _handleMousedown, and call super._handleMousedown 
  // with a new MouseEvent having button numbers 2 and 0 reversed.
  _handleMousedown(event: MouseEvent): void {
    return super._handleMousedown(new MouseEvent(event.type, Object.assign({}, event, { button: event.button === 0 ? 2 : event.button === 2 ? 0 : event.button })));
  }

  // Override _handleClick to make existing binding to clicks do nothing.
  _handleClick(event: MouseEvent): void { }

  // Create a place to store the host element.
  private hostElement: EventTarget | null = null;

  // Listen for contextmenu events (right-clicks), then:
  //  1) Store the hostElement for use in later events.
  //  2) Prevent browser default action.
  //  3) Call super._handleClick to open the menu as expected.
  @HostListener('contextmenu', ['$event'])
  _handleContextMenu(event: MouseEvent): void {
    this.hostElement = event.target;
    if (event.shiftKey) return; // Hold a shift key to open original context menu. Delete this line if not desired behavior.
    event.preventDefault();
    super._handleClick(event);
  }

  // The complex logic below is to handle submenus and hasBackdrop===false well.
  // Listen for click and contextmenu (right-click) events on entire document.
  // If this menu is open, one of the following conditional actions.
  //   1) If the click came from the overlay backdrop, close the menu and prevent default.
  //   2) If the click came inside the overlay container, it was on a menu. If it was
  //      a contextmenu event, prevent default and re-dispatch it as a click.
  //   3) If the event did not come from our host element, close the menu.
  private contextListenerSub = merge(
    fromEvent(document, "contextmenu"),
    fromEvent(document, "click"),
  ).subscribe(event => {
    if (this.menuOpen) {
      if (event.target) {
        const target = event.target as HTMLElement;
        if (target.classList.contains("cdk-overlay-backdrop")) {
          event.preventDefault();
          this.closeMenu();
        } else {
          let inOverlay = false;
          document.querySelectorAll(".cdk-overlay-container").forEach(e => {
            if (e.contains(target))
              inOverlay = true;
          });
          if (inOverlay) {
            if (event.type === "contextmenu") {
              event.preventDefault();
              event.target?.dispatchEvent(new MouseEvent("click", event));
            }
          } else
            if (target !== this.hostElement)
              this.closeMenu();
        }
      }
    }
  });

  // When destroyed, stop listening for the contextmenu events above, 
  // null the host element reference, then call super.
  ngOnDestroy() {
    this.contextListenerSub.unsubscribe();
    this.hostElement = null;
    return super.ngOnDestroy();
  }
}

在您的模块文件中将MatContextMenuTrigger指令添加到declarations列表中，然后它就像使用普通指令一样：

<div [matContextMenuTriggerFor]="myContextMenu">
  Right click here to open context menu.
</div>
<mat-menu #myContextMenu="matMenu">
  My context menu.
</mat-menu>

您可以为左键单击和右键单击分别设置独立的菜单：

<div [matMenuTriggerFor]="myNormalMenu" [matContextMenuTriggerFor]="myContextMenu">
  Left click here to open normal menu.<br>
  Right click here to open context menu.
</div>
<mat-menu #myNormalMenu="matMenu">
  My normal menu.
</mat-menu>
<mat-menu #myContextMenu="matMenu">
  My context menu.
</mat-menu>