PrimeNG <p-menu> 如何保持单击菜单项处于选中状态 (Angular 7)

Question

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

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

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

有人对此有任何想法吗？

Answer 1

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

网页：

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

单击菜单组件时，我添加了 activeMenu($event) 方法。$event 携带单击的 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")

}