如何结合PrimeFlex网格实现PrimeNG MenuBar响应式汉堡菜单？

PrimeNG MenuBar默认响应式断点基于视口宽度，而非父容器宽度，这就是它在PrimeFlex网格列（如col-9、col-6）中无法自动触发汉堡模式的核心原因。以下是两种灵活的解决方案：

方案一：基于容器宽度+菜单内容宽度的动态切换（推荐） #

通过ResizeObserver监听父容器尺寸，同时对比菜单内容的实际宽度，当菜单内容超出容器边界时自动切换为汉堡模式：

1. 模板结构 #

<!-- 给父容器添加模板引用变量 -->
<div class="col-9" #menuContainer>
  <!-- 给MenuBar添加模板引用变量 -->
  <p-menuBar #menuBar [model]="menuItems"></p-menuBar>
</div>

2. 组件逻辑实现 #

import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
import { MenuBar } from 'primeng/menubar';
import { MenuItem } from 'primeng/api';

@Component({
  selector: 'app-submenu',
  templateUrl: './submenu.component.html'
})
export class SubmenuComponent implements AfterViewInit, OnDestroy {
  menuItems: MenuItem[] = [/* 你的菜单项配置 */];
  
  @ViewChild('menuContainer') private menuContainer: ElementRef<HTMLElement>;
  @ViewChild('menuBar') private menuBar: MenuBar;
  private resizeObserver: ResizeObserver;

  ngAfterViewInit(): void {
    this.initResizeListener();
  }

  private initResizeListener(): void {
    this.resizeObserver = new ResizeObserver(entries => {
      const containerWidth = entries[0].contentRect.width;
      // 获取MenuBar根菜单列表的实际宽度（PrimeNG默认DOM结构）
      const menuContentWidth = this.menuBar.el.nativeElement.querySelector('.p-menubar-root-list')?.offsetWidth || 0;

      // 根据内容是否超出容器切换模式
      this.menuBar.mode = menuContentWidth > containerWidth ? 'overlay' : 'static';
    });

    this.resizeObserver.observe(this.menuContainer.nativeElement);
  }

  ngOnDestroy(): void {
    this.resizeObserver?.disconnect();
  }
}

3. 二级窗口样式适配 #

确保汉堡模式的下拉菜单在二级窗口内正常显示，添加以下样式：

.p-menubar.p-menubar-overlay .p-menubar-root-list {
  position: absolute;
  max-width: 100%;
  z-index: 1000; /* 适配二级窗口层级 */
}

方案二：自定义响应式断点（全局复用场景） #

如果需要在多个组件中复用此逻辑，可以扩展PrimeNG的MenuBar组件，重写其断点计算逻辑：

import { MenuBar } from 'primeng/menubar';
import { ElementRef, OnInit } from '@angular/core';

export class ContainerAwareMenuBar extends MenuBar implements OnInit {
  override ngOnInit(): void {
    super.ngOnInit();
    // 移除默认的视口监听
    window.removeEventListener('resize', this.onWindowResize);
    // 监听父容器的尺寸变化
    const parentContainer = this.el.nativeElement.parentElement;
    const resizeObserver = new ResizeObserver(() => {
      // 自定义断点逻辑：以父容器宽度为基准，比如设置容器宽度小于768px时切换
      this.mode = parentContainer.offsetWidth < 768 ? 'overlay' : 'static';
    });
    resizeObserver.observe(parentContainer);
  }
}

然后在组件中使用自定义的ContainerAwareMenuBar替代原生p-menuBar即可。

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