Question

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

Answer 1

第一：您可以通过向子项对象添加routerLinkActiveOptions: { exact: true }来使子菜单项处于活动状态，只要单击其中之一甚至更改路线，它们都将处于活动状态。

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

第二： 您可以使用我发现的解决方法使父项（切换项）处于活动状态，方法是为它们提供expanded: true的Expanded属性会更改父项的状态。

您还可以通过调用返回true或false的函数来使它在激活的路线发生变化时动态化：

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

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

constructor(private router: Router) {}

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

您还可以在没有子项的菜单项上使用该选项，因为expanded: true属性还将使它们处于活动状态。

PRIMENG面板菜单组件中不存在routerLinkActive选项，如何将样式设置为活动选项卡？

1 个答案: