Angular应用中右键禁用与自定义浏览器默认上下文菜单

因为浏览器默认上下文菜单不支持直接修改或删除特定选项，所以我们需要完全禁用默认菜单，再自定义实现可控制的上下文菜单系统。以下是具体的改造思路和代码示例：

核心思路 #

1. 保留原指令的contextmenu事件监听，阻止默认菜单弹出
2. 扩展指令，支持传入自定义菜单项配置（包含显示/禁用状态）
3. 创建独立的上下文菜单组件，负责渲染菜单项和处理交互
4. 通过指令传递鼠标位置和过滤后的菜单项，触发自定义菜单显示

步骤1：定义菜单项接口 #

先统一菜单项的数据结构，包含必要的状态控制字段：

// menu-item.interface.ts
export interface MenuItem {
  label: string;          // 菜单显示文本
  action: () => void;     // 点击触发的回调
  disabled?: boolean;     // 是否禁用（默认false）
  visible?: boolean;      // 是否显示（默认true）
}

步骤2：改造上下文菜单指令 #

扩展原指令，添加输入属性接收菜单配置，输出事件通知菜单触发：

import { Directive, HostListener, Input, Output, EventEmitter } from '@angular/core';
import { MenuItem } from './menu-item.interface';

@Directive({
  selector: '[appCustomContextMenu]'
})
export class CustomContextMenuDirective {
  @Input() menuItems: MenuItem[] = [];
  @Output() menuTriggered = new EventEmitter<{ items: MenuItem[], position: { x: number, y: number } }>();

  @HostListener('contextmenu', ['$event'])
  onContextMenu(event: MouseEvent): void {
    event.preventDefault();
    // 自动过滤掉不可见的菜单项
    const visibleItems = this.menuItems.filter(item => item.visible !== false);
    // 传递菜单项和鼠标位置
    this.menuTriggered.emit({
      items: visibleItems,
      position: { x: event.clientX, y: event.clientY }
    });
  }
}

步骤3：实现自定义菜单组件 #

创建独立组件负责渲染菜单，处理点击和自动隐藏逻辑：

import { Component, Input, Output, EventEmitter, HostListener } from '@angular/core';
import { MenuItem } from './menu-item.interface';

@Component({
  selector: 'app-context-menu',
  template: `
    <div class="context-menu" *ngIf="visible" [style.left.px]="position.x" [style.top.px]="position.y">
      <div 
        *ngFor="let item of menuItems" 
        class="menu-item" 
        [class.disabled]="item.disabled"
        (click)="handleItemClick(item)"
      >
        {{ item.label }}
      </div>
    </div>
  `,
  styles: [`
    .context-menu {
      position: fixed;
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      z-index: 10000;
      min-width: 120px;
    }
    .menu-item {
      padding: 8px 16px;
      cursor: pointer;
      user-select: none;
      font-size: 14px;
    }
    .menu-item:hover:not(.disabled) {
      background-color: #f5f5f5;
    }
    .menu-item.disabled {
      color: #999;
      cursor: not-allowed;
    }
  `]
})
export class ContextMenuComponent {
  @Input() menuItems: MenuItem[] = [];
  @Input() position = { x: 0, y: 0 };
  @Input() visible = false;

  // 点击页面其他区域自动关闭菜单
  @HostListener('document:click')
  onDocumentClick(): void {
    this.visible = false;
  }

  handleItemClick(item: MenuItem): void {
    if (!item.disabled) {
      item.action();
      this.visible = false;
    }
  }
}

步骤4：在页面中使用自定义菜单 #

在宿主组件中配置菜单项，并绑定指令和菜单组件：

import { Component } from '@angular/core';
import { MenuItem } from './menu-item.interface';

@Component({
  selector: 'app-root',
  template: `
    <div 
      appCustomContextMenu 
      [menuItems]="contextMenuItems"
      (menuTriggered)="onMenuTriggered($event)"
      style="width: 100vw; height: 100vh; padding: 20px; box-sizing: border-box;"
    >
      右键点击此处测试自定义菜单<br>
      <button (click)="toggleAdvancedOption()">切换高级选项显示状态</button>
      <button (click)="togglePasteDisabled()">切换粘贴按钮禁用状态</button>
    </div>
    <app-context-menu 
      [menuItems]="currentMenuItems"
      [position]="menuPosition"
      [visible]="menuVisible"
    ></app-context-menu>
  `
})
export class AppComponent {
  contextMenuItems: MenuItem[] = [
    {
      label: '复制',
      action: () => alert('执行复制操作'),
      disabled: false
    },
    {
      label: '粘贴',
      action: () => alert('执行粘贴操作'),
      disabled: true
    },
    {
      label: '删除',
      action: () => alert('执行删除操作')
    },
    {
      label: '高级选项',
      action: () => alert('打开高级设置面板'),
      visible: false
    }
  ];

  currentMenuItems: MenuItem[] = [];
  menuPosition = { x: 0, y: 0 };
  menuVisible = false;

  onMenuTriggered(event: { items: MenuItem[], position: { x: number, y: number } }): void {
    this.currentMenuItems = event.items;
    this.menuPosition = event.position;
    this.menuVisible = true;
  }

  // 动态控制菜单项显示状态
  toggleAdvancedOption(): void {
    const advancedItem = this.contextMenuItems.find(item => item.label === '高级选项');
    if (advancedItem) {
      advancedItem.visible = !advancedItem.visible;
    }
  }

  // 动态控制菜单项禁用状态
  togglePasteDisabled(): void {
    const pasteItem = this.contextMenuItems.find(item => item.label === '粘贴');
    if (pasteItem) {
      pasteItem.disabled = !pasteItem.disabled;
    }
  }
}

动态控制菜单项的关键逻辑 #

你可以根据业务场景随时修改contextMenuItems数组中对应项的disabled或visible属性：

• 比如判断是否有选中内容，控制复制/剪切按钮的禁用状态
• 根据用户权限，隐藏或显示特定操作选项
• 根据当前页面状态，动态调整菜单选项

内容的提问来源于stack exchange，提问作者Shivam Pandey