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

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

我遇到的问题是，每当点击“New”时，“Open”和“New”都会被选中。

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

如果有关于 routerLinkActiveOptions API 的文档指针，那将不胜感激。目前，我无法理解可以使用 routerLinkActiveOptions 设置哪些属性/值作为选项。

- Jagmag

---

当您点击“打开”时，是否会发生相同的行为？ - Chau Tran

你应该使用Angular 4和PrimeNG 4.x或Angular 5和PrimeNG 5：https://stackoverflow.com/questions/47630214/primeng-5-0-2-doesnt-work-with-angular-4/47630478#47630478 - Antikhippe

@chautran - 不，这只会在点击“新建”时发生。当我点击“打开”时，只有“打开”被选中。我觉得这可能是因为打开的URL是新建URL的子集 - 因为新建是路由层次结构中的子节点。 - Jagmag

@Antikhippe - 我已将版本更改为primeng 4.3.0，但这并不影响问题。它仍然以与之前相同的方式工作，即在选择“新建”时选择两个项目。 - Jagmag

@InSane 你尝试在菜单的 onClick 方法中调用 router.navigate 方法了吗？在这种情况下，你可以使用 relativeTo。 - Amit

Answer 1

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

{
      label: '演示',
      icon: 'fa-shield',
      items: [{
        label: '建议书',
        items: [
          { label: '新建', icon: 'fa-plus', routerLink: ['/proposal/create'], routerLinkActiveOptions: { exact: true } },
          { label: '打开', icon: 'fa-search', routerLink: ['/proposal'], routerLinkActiveOptions: { exact: true } },
        ]
      }]
}

完整示例请访问：https://stackblitz.com/edit/angular-a27wca。

- Nilesh Mali

Answer 2

似乎是你的路由/proposal/create和/proposal/出了问题。当你点击New时，它首先调用proposal，然后调用create，这可能是选择New和Open的原因。

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

如果这行不通，我会创建一个jsfiddle并试一试 :)

- Ashwani Kumar

---

谢谢您的建议，但在这种情况下我不想有不同的路由。我希望路由能够指示父子关系，并且想知道如何精确匹配URL。 - Jagmag