Angular 4 + PrimeNG 菜单 - 多个菜单项显示为事件状态

Question

我正在使用

Angular 4.1.2 and PrimeNG 4.3.0

我遇到的问题是 PanelMenu ，即 p-panelMenu 控件。

以下是我的菜单结构

{
    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}" 来避免这种情况，但似乎也没有任何效果。

任何有关routerLinkActiveOptions API 的文档指针也将受到赞赏。目前，我无法理解可以使用 routerLinkActiveOptions

将哪些属性/值设置为选项

Answer 1

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

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

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