Angular 4 + PrimeNG 菜单 - 多个菜单项显示为活动状态

Question

我在用

Angular 4.1.2 和 PrimeNG 4.3.0

我遇到的问题是PanelMenuiep-panelMenu控件。

以下是我的Menu的结构

{
    label: 'Demo',
    icon: 'fa-shield',
    items: [{
        label: 'Proposal',
        items: [
            { label: 'New', icon: 'fa-plus', routerLink: ['/proposal/create'], routerLinkActiveOptions: "{exact:true}" },
            { label: 'Open', icon: 'fa-search', routerLink: ['/proposal'] },
        ]
},

我遇到的问题是，每当单击“新建”时，“打开”和“新建”都会被选中。

我试图通过放置来避免这种情况，routerLinkActiveOptions: "{exact:true}"但它似乎也没有任何效果。

任何指向有关 API for 的文档的指针routerLinkActiveOptions也将不胜感激。目前，我无法理解我可以使用哪些属性/值设置为选项routerLinkActiveOptions

Answer 1

要解决此问题，请对您的菜单模型进行以下更改：

{
      标签：'演示'，
      图标：'fa-盾'，
      项目： [{
        标签：'提案',
        项目： [
          {标签：'新'，图标：'fa-plus'，routerLink：['/proposal/create']，routerLinkActiveOptions：{精确：真}}，
          { label: 'Open', icon: 'fa-search', routerLink: ['/proposal'], routerLinkActiveOptions: { exact: true } },
        ]
      }]
}

完整示例如下：https : //stackblitz.com/edit/angular-a27wca