Angular中如何在action menu内使用stopPropagation阻止accordion展开

你当前的stopPropagation()调用时机完全错误：createMenuList是页面初始化阶段生成菜单项配置时执行的函数，此时点击事件还未触发，写在这里的阻止冒泡逻辑不会生效，且你声明的e变量从未被赋值，直接调用还存在空值报错风险。

你只需要在点击操作按钮的第一时间阻止事件向上冒泡即可，因为手风琴的展开逻辑是绑定在头部区域的点击事件上的，只要拦截了按钮点击事件的冒泡，父级手风琴就不会接收到点击信号触发展开。

修改后的HTML代码 #

<p-menu
  #menu
  [popup]="true"
  [model]="menusMap[item.id]"
></p-menu>
<button
  pButton
  class="p-button-text"
  icon="pi pi-ellipsis-h"
  (click)="toggleMenu(menu, $event)"
></button>

修改后的TS代码 #

import { Menu } from 'primeng/menu'; // 注意引入Menu类型

menusMap: Record<string, MenuItem[]> = {};

// 原有初始化逻辑保留即可
initFunction() {
  if (page.list) {
    const items = page.list;
    this.menusMap = {};
    items.forEach((item) => {
      this.menusMap[item.id] = this.createMenuList(item);
    });
  }
}

// 新增菜单切换方法，先阻止冒泡再触发菜单显示
toggleMenu(menu: Menu, event: Event) {
  event.stopPropagation();
  menu.toggle(event);
}

createMenuList(item: Items): MenuItem[] {
  // 删除原有的无效的this.e.stopPropagation()代码
  return [
    {
      label: '',
      icon: '',
      command: (e) => {
        // 如果点击菜单选项仍会触发冒泡，可以在这里再加一层阻止
        e.originalEvent.stopPropagation();
        this.router.navigate(['/aaa']);
      }
    }
  ];
}

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