PrimeNG p-menubar组件如何在左右两侧分别配置不同的model菜单

实现方案 #

PrimeNG的p-menubar原生[model]属性仅支持全局配置一组菜单，要实现左右分栏绑定不同菜单模型，需要配合内置p-menu组件和start/end插槽实现：

第一步：导入依赖模块 #

确保你的模块中同时导入MenubarModule和MenuModule：

// 对应模块文件
import { MenubarModule } from 'primeng/menubar';
import { MenuModule } from 'primeng/menu';

@NgModule({
  imports: [
    // ...其他导入
    MenubarModule,
    MenuModule
  ]
})

第二步：编写模板代码 #

在p-menubar的两个插槽中分别插入p-menu组件，绑定各自的菜单模型，直接复用p-menubar的原生样式类保证交互和视觉一致：

<p-menubar>
  <!-- 左侧菜单区域 -->
  <ng-template pTemplate="start">
    <p-menu 
      [model]="leftMenuItems" 
      [popup]="false"
      styleClass="p-menubar-root-list"
    ></p-menu>
  </ng-template>

  <!-- 右侧菜单区域 -->
  <ng-template pTemplate="end">
    <p-menu 
      [model]="rightMenuItems" 
      [popup]="false"
      styleClass="p-menubar-root-list"
    ></p-menu>
  </ng-template>
</p-menubar>

第三步：组件中定义菜单模型 #

分别定义左右两侧的菜单配置即可，写法和原来p-menubar的model配置完全一致：

// 组件ts文件
import { MenuItem } from 'primeng/api';

@Component({
  // ...组件配置
})
export class YourComponent {
  leftMenuItems: MenuItem[] = [
    { label: '首页', icon: 'pi pi-home' },
    { label: '产品', icon: 'pi pi-box', items: [/* 子菜单配置 */] }
  ];

  rightMenuItems: MenuItem[] = [
    { label: '通知', icon: 'pi pi-bell' },
    { label: '个人中心', icon: 'pi pi-user', items: [/* 子菜单配置 */] }
  ];
}

可选样式调整 #

如果出现样式错位，可添加少量全局样式适配：

.p-menubar .p-menubar-root-list {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
}

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