PrimeNg中已禁用的子MenuItem仍可展开，如何修复？

PrimeNg的disabled属性默认只禁用菜单项的导航点击行为，不会自动阻止子菜单的展开/折叠操作，要解决这个问题可以通过拦截菜单切换事件来实现：

方法：利用onBeforeToggle事件拦截展开操作 #

1. 在HTML模板中给p-panelMenu绑定onBeforeToggle事件：

<p-panelMenu [model]="items" [style]="{'width':'300px'}" (onBeforeToggle)="handleBeforeToggle($event)"></p-panelMenu>

2. 在TypeScript中实现事件处理方法，判断菜单项是否禁用，若禁用则阻止切换：

import { MenuItemToggleEvent } from 'primeng/api';

// ...

this.items = [
  {
    label: 'File',
    icon: 'pi pi-fw pi-file',
    items: [
      {
        label: 'New',
        icon: 'pi pi-fw pi-plus',
        expanded: false,
        disabled: true,
        items: [
          {
            label: 'Bookmark',
            icon: 'pi pi-fw pi-bookmark',
          }
        ],
      },
      {
        label: 'Delete',
        icon: 'pi pi-fw pi-trash',
      },
    ],
  },
];

handleBeforeToggle(event: MenuItemToggleEvent) {
  // 若菜单项处于禁用状态，阻止展开/折叠动作
  if (event.item.disabled) {
    event.preventDefault();
  }
}

可选：添加CSS增强视觉反馈 #

为了让禁用菜单项的展开图标更直观，可以添加CSS禁用其点击事件并降低透明度：

.p-panelmenu .p-menuitem-disabled .p-panelmenu-header-icon {
  pointer-events: none;
  opacity: 0.5;
}

内容的提问来源于stack exchange，提问作者lk-granit