如何通过编程方式选中PrimeNG p-menu中的菜单项？

嘿，我来帮你搞定PrimeNG p-menu的编程式选中问题！其实操作起来确实挺直接的，主要有两种靠谱的实现方式，我给你一步步拆解：

PrimeNG的Menu组件本身提供了selectItem()方法，能直接帮我们选中指定菜单项，步骤很清晰：

1. 首先在组件里通过@ViewChild获取p-menu的引用：

import { Component, ViewChild } from '@angular/core';
import { Menu } from 'primeng/menu';
import { MenuItem } from 'primeng/api';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html'
})
export class DemoComponent {
  @ViewChild('myMenu') private menuInstance!: Menu;
  menuItems: MenuItem[] = [
    { label: '首页', icon: 'pi pi-home' },
    { label: '用户管理', icon: 'pi pi-users' },
    { label: '系统设置', icon: 'pi pi-cog' }
  ];

  // 触发编程选中的方法
  triggerMenuItemSelection() {
    // 先从菜单模型里找到你要选中的目标项（可以通过label、id等标识匹配）
    const targetItem = this.menuItems.find(item => item.label === '用户管理');
    
    if (targetItem && this.menuInstance) {
      // 调用组件的selectItem方法完成选中
      this.menuInstance.selectItem(targetItem);
    }
  }
}

2. 然后在模板里给p-menu加上引用标识，并添加触发按钮：

<p-menu #myMenu [model]="menuItems"></p-menu>
<button pButton label="选中用户管理项" (click)="triggerMenuItemSelection()"></button>

PrimeNG的MenuItem对象自带active字段，只要把目标项的这个属性设为true，就能实现选中效果（记得先重置其他项的状态，避免多选）：

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

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html'
})
export class DemoComponent {
  menuItems: MenuItem[] = [
    { label: '首页', icon: 'pi pi-home' },
    { label: '用户管理', icon: 'pi pi-users' },
    { label: '系统设置', icon: 'pi pi-cog' }
  ];

  selectMenuItemByActiveState() {
    // 先重置所有菜单项的active状态
    this.menuItems.forEach(item => item.active = false);
    
    // 找到目标项并设置为选中状态
    const targetItem = this.menuItems.find(item => item.label === '系统设置');
    if (targetItem) {
      targetItem.active = true;
    }
  }
}

• 如果要选中子菜单里的项，得先调用menuInstance.toggle(parentItem)展开父菜单，再选中子项
• 确保菜单模型menuItems已经完成初始化，建议在ngAfterViewInit生命周期钩子或者数据加载完成后再执行选中逻辑，避免出现undefined的问题

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