PrimeNG <p-menu> 如何保持单击菜单项处于选中状态（Angular 7）答案

【问题标题】：PrimeNG <p-menu> how to keep click menu item selected (Angular 7)PrimeNG <p-menu> 如何保持单击菜单项处于选中状态（Angular 7）
【发布时间】：2022-02-23 19:34:34
【问题描述】：

我在 Angular 7 项目中使用 primeNg 组件。

<p-menu [model]="items" ></p-menu>

在处理这个组件时，我们无法访问它的内部结构来显示点击菜单项为选中状态。在选择某个菜单并更改其颜色时推送活动类。

有人知道吗？

【问题讨论】：

标签： html dom primeng angular7

【解决方案1】：

经过一番研究，我找到了解决这个问题的方法。

HTML：

<p-menu [model]="items"  (click) = "activeMenu($event)"></p-menu>

单击菜单组件时，我添加了 activeMenu($event) 方法。 $event 带有 clicked DOM 元素，即菜单项元素。

组件：

在组件上，我写了如下代码。

activeMenu(event) {

let node;
if (event.target.tagName === "A") {
  node = event.target;
} else {
  node = event.target.parentNode;
}
let menuitem = document.getElementsByClassName("ui-menuitem-link");
for (let i = 0; i < menuitem.length; i++) {
  menuitem[i].classList.remove("active");
}
node.classList.add("active")

}

【讨论】：

如果 event.target 是 Text，我可以知道如何获取 event.target 值。我需要获取选定的 p-menu 文本
将点击事件添加到您的跨度标签
如果有多个实例，上述解决方案将不起作用。尝试将 ElementRef 注入构造函数并使用 querySelectorAll 方法代替 document.getElementsByClassName("ui-menuitem-link") 。
你好。在调试时，我看到添加了活动类，但是当它完成时，活动类没有呈现为 HTML。你遇到过这样的事情吗？

【解决方案2】：

对于 PrimeNG 10，我必须通过 Surendranath 通过以下方式调整代码：

模板：

<p-menu [model]="items" (click) = "activeMenu($event)"></p-menu>

组件：

  activeMenu(event) {
    //console.log(event.target.classList);
    let node;
    if (event.target.classList.contains("p-submenu-header") == true) {
      node = "submenu";
    } else if (event.target.tagName === "SPAN") {
      node = event.target.parentNode.parentNode;
    } else {
      node = event.target.parentNode;
    }
    //console.log(node);
    if (node != "submenu") {
      let menuitem = document.getElementsByClassName("p-menuitem");
      for (let i = 0; i < menuitem.length; i++) {
        menuitem[i].classList.remove("active");
      }
      node.classList.add("active");
    }
  }

全局样式（不是组件样式）

.p-menuitem.active {
  background-color: orange;
}

【讨论】：

你好。在调试时，我看到添加了活动类，但是当它完成时，活动类没有呈现为 HTML。你遇到过这样的事情吗？
它适用于 p-panelMenu

【解决方案3】：

感谢您提供此 SURENDRANATH SONAWANE - 在尝试了许多其他解决方案后，第一个对我有用的解决方案。

如果这对任何人都有帮助，我无法识别我的 CSS 类，必须在 .css 中添加以下符号（注意 :host >>> 前缀）

:host >>> .active {
    background-color: #b8ebf5;
}

...另外，对于默认菜单项，通过设置 styleClass 在 MenuIItem[] 定义中预先选择它，例如：

        this.items = [
           {label: 'Search' , url : '/#/query' , styleClass : 'active'}, // Default item
           {label: 'Stats'  , url : '/#/stats' },
           {label: 'User'   , url : '/#/user'  }
        ]

【讨论】：

【解决方案4】：

html:

<p-menu 
    [model]="[
     { label: 'a', command: onClick() ,styleClass : getClassByLabel('a') },
     { label: 'b', command: onClick() ,styleClass : getClassByLabel('b') }
    ]"
><p-menu>

ts：

  currentModel: any;

  onClick() {
    return (event) => this.currentModel = event.item;
  }

  getClassByLabel(label: string): string {
    if (this.currentModel && this.currentModel.label == label) {
      return 'active';
    }
  }

样式.css：

p-menu > div > ul > li.active > a > span {
  color: color:blue !important;
}

【讨论】：

【解决方案5】：

我正在使用 Angular 13.0.2 和 Primeng 13.0.0

我将以下代码添加到 myComponent.component.css not global styles.scss

::ng-deep .p-menuitem-link-active{ 背景颜色：#FED201！重要； }

【讨论】：