如何排除元素触发Angular Material CDK自定义右键菜单？

方法一：动态控制触发器禁用状态 #

利用CDK提供的cdkContextMenuTriggerDisabled输入属性，结合右键事件判断点击目标，动态开关自定义菜单的触发：

模板修改 #

<form 
  [cdkContextMenuTriggerFor]="context_menu"
  [cdkContextMenuTriggerDisabled]="isMenuDisabled"
  (contextmenu)="checkTargetElement($event)"
>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div>

  <input type="text"> <!-- 自动排除该元素 -->

  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div>
</form>

<ng-template #context_menu>
  <div class="example-menu" cdkMenu>
      <button class="example-menu-item" cdkMenuItem>Cut</button>
      <button class="example-menu-item" cdkMenuItem>Copy</button>
      <button class="example-menu-item" cdkMenuItem>Link</button>
  </div>
</ng-template>

组件逻辑 #

isMenuDisabled = false;

checkTargetElement(event: MouseEvent) {
  const target = event.target as HTMLElement;
  // 判断点击目标是否为input或input的子元素
  this.isMenuDisabled = target.tagName === 'INPUT' || target.closest('input') !== null;
}

当点击input时，isMenuDisabled设为true，CDK会禁用自定义菜单触发，浏览器默认右键菜单自动生效。

方法二：自定义指令拦截事件冒泡 #

编写一个轻量指令，给需要排除的元素添加，阻止右键事件向上传递到父级触发器：

自定义指令代码 #

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[excludeContextMenu]'
})
export class ExcludeContextMenuDirective {
  @HostListener('contextmenu', ['$event'])
  onContextMenu(event: MouseEvent) {
    // 阻止事件向上冒泡，父级CDK触发器无法接收
    event.stopPropagation();
    // 不阻止默认事件，保留浏览器原生右键菜单
  }
}

模板使用 #

<input type="text" excludeContextMenu>

右键点击该input时，事件不会传递到父表单的CDK触发器，自定义菜单不会触发，原生菜单正常显示。

备选库推荐 #

如果上述方案无法满足需求，可尝试以下支持细粒度控制的Angular菜单库：

• Ngx Context Menu：支持通过选择器配置排除元素，触发规则更灵活
• Angular Context Menu：提供DOM节点级别的触发过滤，适配复杂场景

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