Angular CDK菜单点击菜单项不关闭需求解决方案求助

默认Angular CDK菜单点击菜单项会自动关闭，要实现点击菜单项时菜单保持打开，仅在点击菜单外部或按下ESC键时关闭的需求，且保留组件原有可访问性（如键盘导航），可以通过阻止菜单项点击事件的冒泡来实现，具体步骤如下：

核心解决方案 #

CDK菜单的关闭逻辑依赖于菜单项点击事件向上传播到菜单容器，触发关闭动作。只需在每个菜单项上阻止事件冒泡，即可避免菜单关闭，同时保留外部点击、ESC键关闭的默认行为。

修改后的代码示例 #

组件类（可选优化）

如果需要批量处理菜单项逻辑，可在组件中添加事件处理方法：

import {Component} from '@angular/core';
import {CdkMenu, CdkMenuItem, CdkMenuTrigger, MenuItemClickEvent} from '@angular/cdk/menu';

@Component({
  selector: 'cdk-menu-standalone-menu-example',
  styleUrl: 'cdk-menu-standalone-menu-example.css',
  templateUrl: 'cdk-menu-standalone-menu-example.html',
  standalone: true,
  imports: [CdkMenuTrigger, CdkMenu, CdkMenuItem],
})
export class CdkMenuStandaloneMenuExample {
  onMenuItemClick(event: MenuItemClickEvent) {
    // 阻止事件冒泡，避免菜单关闭
    event.stopPropagation();
    
    // 在此添加菜单项的业务逻辑
    const itemText = event.item.text.trim();
    if (itemText === 'Refresh') {
      // 执行刷新操作
    } else if (itemText === 'Settings') {
      // 打开设置面板
    }
    // 其他菜单项逻辑...
  }
}

模板文件

给每个cdkMenuItem绑定cdkMenuItemClicked事件，阻止冒泡：

<button [cdkMenuTriggerFor]="menu" class="example-standalone-trigger">Click me!</button>

<ng-template #menu>
  <div class="example-menu" cdkMenu>
    <button class="example-menu-item" cdkMenuItem (cdkMenuItemClicked)="onMenuItemClick($event)">Refresh</button>
    <button class="example-menu-item" cdkMenuItem (cdkMenuItemClicked)="onMenuItemClick($event)">Settings</button>
    <button class="example-menu-item" cdkMenuItem (cdkMenuItemClicked)="onMenuItemClick($event)">Help</button>
    <button class="example-menu-item" cdkMenuItem (cdkMenuItemClicked)="onMenuItemClick($event)">Sign out</button>
  </div>
</ng-template>

如果不需要额外业务逻辑，也可以直接在模板中写内联代码简化：

<button class="example-menu-item" cdkMenuItem (cdkMenuItemClicked)="$event.stopPropagation()">Refresh</button>

方案优势 #

• 完全保留CDK菜单的可访问性特性：键盘上下箭头可正常跳转菜单项，焦点管理、屏幕阅读器支持不受影响
• 无需替换为Overlay组件，避免引入新的可访问性问题
• 仅修改事件逻辑，代码侵入性低，易于维护

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