PrimeNG 9 tieredMenu如何实现鼠标悬停直接展开子菜单

问题现象 #

Angular项目搭配9版本PrimeNG组件库使用tieredMenu（层级菜单）时，预期实现鼠标悬停即展开子菜单的交互，实际表现为必须先点击一次菜单后，鼠标悬停展开子菜单的逻辑才会生效。

问题根因 #

PrimeNG 9版本的TieredMenu组件默认逻辑为：组件初始渲染时内部visible状态为false，不会绑定子菜单项的mouseenter展开监听；只有首次触发点击/主动调用show()方法将组件状态置为激活后，子菜单的悬停展开逻辑才会启用。

修复步骤 #

• 给tieredMenu组件声明模板引用变量，指向组件实例
• 包裹菜单的外层容器绑定mouseenter事件，首次鼠标移入时主动调用组件的show()方法激活组件状态，激活后组件自带的子菜单悬停展开逻辑会自动生效
• 外层容器绑定mouseleave事件，鼠标移出整个菜单区域时调用hide()方法收起菜单，匹配常规悬停菜单的交互逻辑

代码示例 #

模板文件

<div (mouseenter)="activeMenu($event, tieredMenuRef)" (mouseleave)="tieredMenuRef.hide()">
  <p-tieredMenu #tieredMenuRef="p-tieredMenu" [model]="menuItems"></p-tieredMenu>
</div>

组件逻辑文件

import { Component } from '@angular/core';
import { TieredMenu } from 'primeng/tieredmenu';
import { MenuItem } from 'primeng/api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  menuItems: MenuItem[];

  ngOnInit() {
    // 正常初始化菜单配置即可
    this.menuItems = [
      // 自定义菜单项配置
    ];
  }

  activeMenu(event: MouseEvent, menuInstance: TieredMenu) {
    // 避免重复调用show方法触发不必要的重绘
    if (!menuInstance.visible) {
      menuInstance.show(event);
    }
  }
}

如果你使用的是popup模式的弹出式层级菜单，直接给触发元素绑定mouseenter事件调用菜单实例的show()方法即可，不需要额外包裹容器。

注意：该方案不需要修改PrimeNG组件源码，兼容9.x全系列小版本，不会影响组件原有点击、键盘操作等内置逻辑。

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