Question

我正在使用

Angular 4.1.2和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

Answer 2

您的路线/proposal/create和/proposal/似乎有问题。当您点击新时，它首先调用proposal然后create，这可能是同时选择新和打开的原因

你可以尝试完全不同的路线，例如/New和/Open，在这种情况下它应该可以正常工作。

如果这不起作用，那么我创建一个jsfiddle并试一试：）

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

2 个答案: