PrimeNg 16.9.1 Mega Menu实现hover显示功能的方案咨询

优先推荐：无需继承组件的快速实现 #

不用折腾继承，直接通过Angular的鼠标事件结合ViewChild就能搞定，步骤很简单：

1. 模板层绑定事件 #

给MegaMenu加个模板引用变量，然后在菜单项模板里绑定mouseenter和mouseleave事件：

<p-megaMenu #megaMenu [model]="menuItems">
  <!-- 自定义菜单项模板 -->
  <ng-template pTemplate="item" let-item>
    <div 
      (mouseenter)="showSubmenu(item)" 
      (mouseleave)="hideSubmenu(item)"
      class="p-menuitem-content"
    >
      <span class="p-menuitem-icon" *ngIf="item.icon"><i class="{{item.icon}}"></i></span>
      <span class="p-menuitem-text">{{ item.label }}</span>
    </div>
  </ng-template>
  <!-- 子菜单模板，处理鼠标停留时不收起 -->
  <ng-template pTemplate="submenu" let-item>
    <div 
      (mouseenter)="clearHideTimer()" 
      (mouseleave)="hideSubmenu(item)"
    >
      <p-megaMenuSubmenu [item]="item"></p-megaMenuSubmenu>
    </div>
  </ng-template>
</p-megaMenu>

2. 组件逻辑控制展开/收起 #

在组件类里通过ViewChild拿到MegaMenu实例，再写对应的方法，还能加延迟隐藏的逻辑（对标Menubar的autoHideDelay）：

import { Component, ViewChild, OnInit } from '@angular/core';
import { MegaMenu } from 'primeng/megamenu';
import { MenuItem } from 'primeng/api';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  @ViewChild('megaMenu') private megaMenu!: MegaMenu;
  menuItems: MenuItem[] = [];
  private hideTimer: any;
  // 自定义延迟时间，单位ms
  private autoHideDelay = 300;

  ngOnInit(): void {
    // 初始化你的菜单项
    this.menuItems = [
      {
        label: '主菜单1',
        items: [
          { label: '子项1-1', icon: 'pi pi-file' },
          { label: '子项1-2', icon: 'pi pi-file-o' }
        ]
      },
      {
        label: '主菜单2',
        items: [
          { label: '子项2-1', icon: 'pi pi-pencil' },
          { label: '子项2-2', icon: 'pi pi-pencil-alt' }
        ]
      }
    ];
  }

  showSubmenu(item: MenuItem): void {
    // 清除之前的延迟定时器，避免误收起
    this.clearHideTimer();
    this.megaMenu.show(item);
  }

  hideSubmenu(item: MenuItem): void {
    // 设置延迟隐藏，鼠标离开后等一会再收起
    this.hideTimer = setTimeout(() => {
      this.megaMenu.hide(item);
    }, this.autoHideDelay);
  }

  clearHideTimer(): void {
    if (this.hideTimer) {
      clearTimeout(this.hideTimer);
      this.hideTimer = null;
    }
  }
}

3. 样式优化（可选） #

如果需要让菜单项鼠标悬停时有视觉反馈，可以加个简单的样式：

.p-menuitem:hover .p-menuitem-content {
  background-color: var(--surface-hover);
}

备选方案：继承MegaMenu组件扩展功能 #

如果你的项目里多个地方需要这个悬停功能，不想重复写代码，可以继承原组件扩展属性：

1. 创建自定义MegaMenu组件 #

import { Component, Input, HostListener } from '@angular/core';
import { MegaMenu } from 'primeng/megamenu';
import { MenuItem } from 'primeng/api';

@Component({
  selector: 'app-hover-mega-menu',
  template: `<ng-content></ng-content>`,
  styles: [`
    :host ::ng-deep .p-menuitem:hover .p-menuitem-content {
      background-color: var(--surface-hover);
    }
  `]
})
export class HoverMegaMenuComponent extends MegaMenu {
  @Input() autoHideDelay = 300;
  private hideTimer: any;

  @HostListener('mouseenter', ['$event'])
  onMenuItemMouseEnter(event: MouseEvent): void {
    const item = this.getMenuItemFromElement(event.target as HTMLElement);
    if (item) {
      this.clearHideTimer();
      this.show(item);
    }
  }

  @HostListener('mouseleave', ['$event'])
  onMenuItemMouseLeave(event: MouseEvent): void {
    const item = this.getMenuItemFromElement(event.target as HTMLElement);
    if (item) {
      this.hideTimer = setTimeout(() => {
        this.hide(item);
      }, this.autoHideDelay);
    }
  }

  // 子菜单鼠标移入时清除隐藏定时器
  @HostListener('mouseenter', ['$event'], { target: '.p-megamenu-submenu' })
  onSubmenuMouseEnter(): void {
    this.clearHideTimer();
  }

  private clearHideTimer(): void {
    if (this.hideTimer) {
      clearTimeout(this.hideTimer);
      this.hideTimer = null;
    }
  }

  private getMenuItemFromElement(element: HTMLElement): MenuItem | null {
    // 向上查找菜单项元素，获取绑定的item数据
    let currentElement = element;
    while (currentElement && currentElement.nodeType === 1) {
      if (currentElement.classList.contains('p-menuitem')) {
        return (currentElement as any).dataItem;
      }
      currentElement = currentElement.parentNode as HTMLElement;
    }
    return null;
  }
}

2. 使用自定义组件 #

在模板里直接用自定义组件，和原MegaMenu用法一样，还能传autoHideDelay参数：

<app-hover-mega-menu [model]="menuItems" [autoHideDelay]="400"></app-hover-mega-menu>

总结 #

• 单个组件用：选事件绑定方案，快速上手，不用改组件结构；
• 多组件复用：选继承扩展方案，一次封装到处用。

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