html - PrimeNG 如何保持点击菜单项处于选中状态(Angular 7)

Question

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

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

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

有人知道吗？

Answer 1

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

Html:

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

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

Component:

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

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")

}