PrimeNG <p-menu>如何保持单击菜单项处于选中状态（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 携带单击的 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

对于 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 3

我正在使用

Angular 13.0.2

和

Primeng 13.0.0

我将以下代码添加到 myComponent.component.css 不是全局

styles.scss

::ng-deep .p-menuitem-link-active{
  background-color: #FED201!important;
}

Answer 4

感谢您的 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 5

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 6

对我来说最简单的解决方案如下：

<a class="p-menu-item-link"
    [routerLink]="item.route"
    [routerLinkActive]="['active']"
  ></a>

添加 routerLinkActive 使我能够始终选择 menuItem。然后你只需要使用正确的 css 值就可以得到你想要的。