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带有单击的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")

}

Answer 2

感谢您的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'  }
        ]

Answer 3

对于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;
}

PrimeNG <p-menu>如何保持选择的单击菜单项（Angular 7）

3 个答案: