关闭对话框后如何禁用PrimeNG菜单项的激活状态

我懂你遇到的这个小困扰——点击PanelMenu的父菜单项打开对话框后，关掉对话框时那个父项还亮着/处于激活状态，确实有点影响体验。咱们用几步简单的操作就能搞定：

步骤1：给PanelMenu加模板引用并绑定对话框关闭事件 #

先在HTML里给p-panelMenu加个模板引用变量，同时给p-dialog绑定关闭时触发的事件：

<p-panelMenu #panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu>
<p-dialog 
  header="HELLO" 
  [(visible)]="display" 
  modal="modal" 
  [responsive]="true" 
  [width]="350" 
  [minWidth]="200"
  (onHide)="resetPanelMenuState()"
>
  <span>hi</span>
</p-dialog>

这里的(onHide)事件会在对话框完全关闭时自动触发，刚好用来处理PanelMenu的状态重置。

步骤2：在TS中获取PanelMenu实例并实现重置方法 #

接下来在组件类里，通过ViewChild拿到PanelMenu的实例，再写个重置状态的方法：

import { Component, ViewChild } from '@angular/core';
import { PanelMenu } from 'primeng/panelmenu';

@Component({
  // 你的组件元数据（比如selector、templateUrl等）
})
export class YourComponent {
  items: any[];
  display: boolean = false;

  @ViewChild('panelMenu') panelMenu!: PanelMenu;

  constructor() {
    this.items = [
      { label: 'File', icon: 'fa-file-o', command: (event) => { this.showDialog(event) } }
    ];
  }

  showDialog(event: any) {
    this.display = true;
  }

  resetPanelMenuState() {
    // 调用PanelMenu内置的reset方法，一键重置所有菜单项的激活/展开状态
    this.panelMenu.reset();
    
    // 如果你只想单独重置这个File父项，也可以直接修改它的expanded属性：
    // this.items[0].expanded = false;
  }
}

为啥这么做能解决问题？ #

PrimeNG的PanelMenu在点击父菜单项时，会自动把它标记为激活（展开）状态，但对话框的关闭操作和PanelMenu的状态是完全独立的，不会自动触发重置。通过调用reset()方法，我们可以强制让PanelMenu回到初始状态；要是只想针对特定菜单项调整，直接修改对应item的expanded属性也能达到效果。

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