PrimeNG <p-menu> 如何保持点击菜单项被选中 (Angular 7)

Question

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

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

在处理此组件时，我们无权访问其内部结构以将单击菜单项显示为选中状态。当某个菜单将被选中并更改其颜色时，按下激活 class。

有人知道吗？

Answer 1

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

Html:

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

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

}

Answer 2

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

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

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

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

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

Answer 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;
}

Answer 5

我正在使用 Angular 13.0.2 和 Primeng 13.0.0

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

::ng-deep .p-menuitem-link-active{ background-color：#FED201！重要； }

PrimeNG <p-menu> 如何保持点击菜单项被选中 (Angular 7)

PrimeNG <p-menu> how to keep click menu item selected (Angular 7)

html

dom

primeng

angular7