菜单项和子菜单项的 PrimeNG Panelmenu 活动状态? [英] PrimeNG Panelmenu active state for menu items and submenu items?

问题描述

我使用的是 Angular 7 和 PrimeNg 版本7.1.0-rc.1".目前我正在尝试集成 PanelMenu 组件，但无法为活动选项卡设置样式，因为 routerLinkActive 不可用.有没有其他方法可以实现相同的目标.谢谢

解决方案

第一:您可以通过将 routerLinkActiveOptions: { exact: true } 添加到子项对象来激活子菜单项，这将使它们在您单击其中之一或什至路由更改时处于活动状态:

项目:[{标签:'查看分支'，图标:'pi pi-fw pi-铅笔'，routerLink: ['/pages/settings/branches'],routerLinkActiveOptions: { 精确: true }},{标签:'添加分支'，图标:'pi pi-fw pi-tags'，routerLink: ['/pages/settings/branches/add/0'],routerLinkActiveOptions: { 精确: true }}]

第二:您可以使用我发现的解决方法使父项(切换项)处于活动状态，方法是给它们 expanded: true 扩展属性会改变父项的状态.

您还可以通过调用返回 true 或 false 的函数，在激活的路由发生变化时使其动态化:

<代码>{标签:常规设置"，icon: 'pi pi-pw pi-file',routerLink: ['/pages/settings/general'],扩展:this.checkActiveState('/pages/settings/general')}

checkActiveState 函数使用 Angular Router 检查当前活动的路由，如果它匹配给定的 url，那么它将返回 True 并且父扩展属性将父状态更改为活动:

构造函数(私有路由器:路由器){}checkActiveState(givenLink) {console.log(this.router.url);如果 (this.router.url.indexOf(givenLink) === -1) {返回假；} 别的 {返回真；}}

<块引用>

您也可以在没有子项的菜单项上使用该解决方法，因为 expanded: true 属性也会使它们处于活动状态.

I am using Angular 7 and PrimeNg version "7.1.0-rc.1". Currently I am trying to integrate PanelMenu component but unable to set styles for active tab as routerLinkActive is not available. Is there any other way I can achieve the same. Thanks

解决方案

First: you can make sub-menu items active by adding routerLinkActiveOptions: { exact: true } to the child items objects, that would make them active whenever you click on one of them or even the route changed:

items: [
  {
    label: 'View Branches',
    icon: 'pi pi-fw pi-pencil',
    routerLink: ['/pages/settings/branches'],
    routerLinkActiveOptions: { exact: true }
  },
  {
    label: 'Add Branch',
    icon: 'pi pi-fw pi-tags',
    routerLink: ['/pages/settings/branches/add/0'],
    routerLinkActiveOptions: { exact: true }
  }
]

Second: you can make the parent items (the toggling item) active using the work around i figured out, by giving them expanded: true the expanded property would change the state of the parent.

you also can make it dynamic whenever the activated route change by calling a function which returns true or false:

{
   label: 'General Settings',
   icon: 'pi pi-pw pi-file',
   routerLink: ['/pages/settings/general'],
   expanded: this.checkActiveState('/pages/settings/general')
}

The checkActiveState function checks the current active route using the Angular Router and if it match the given url then it would return True and the parent expanded property would change the parent state to active:

constructor(private router: Router) {}

checkActiveState(givenLink) {
  console.log(this.router.url);
  if (this.router.url.indexOf(givenLink) === -1) {
    return false;
  } else {
    return true;
  }
}

You can also use that work around on the menu items that got no childs items as the expanded: true property would also make them active.

这篇关于菜单项和子菜单项的 PrimeNG Panelmenu 活动状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！