4

我在 Angular 6 中使用 nebular，在单击菜单项时遇到问题，未添加父菜单项上的活动类。但是，如果您看到http://akveo.com/ngx-admin，当您单击“UI-features”中的““buttons”时，它们的 UI-features 会突出显示。

下面是我的 JSON 文件：

[
    {
        "title": "Dashboards",
        "icon": "font_icons8 icons8-statistics",
        "link": "/dashboard",
        "home": true
    },
    {
        "title": "UI Features",
        "icon": "font_icons8 icons8-data-configuration",
        "link": "/ui-features",
        "children": [
            {
                "title": "Typography",
                "link": "/ui-features/typography"
            },
            {
                "title": "Grid",
                "link": "/ui-features/grid"
            }
        ]
    },
]

请帮我摆脱这个问题。

4

4 回答 4

2

在每个菜单项的链接属性中，我设置了项目的完整路径。以前我只设置 /componentName 而不是 /fullpath/componentName

于 2020-04-02T17:39:33.310 回答
0

通过我的实验和查看星云源代码，我可以发现：

  1. an 的链接属性NbMenuItem应以 . 为前缀/。
  2. 我们传递给元素的items属性<nb-menu>应该从头开始初始化。详情：有一个私有方法setParent()，设置parent每个菜单项的子项的属性，该方法只在ngOnInitof上调用NbMenuComponent。因此，如果无法从一开始就初始化菜单项，则另一种解决方案是parent使用 setParent 函数自行设置每个子项的属性。
    私人 setParent（项目：NbMenuItem）{
        item.children && item.children.forEach(child => {
          child.parent = 项目；
          this.setParent(child);
        });
      }

然后调用列表setParent的所有元素，items即items.map(item => this.setParent(item))

于 2022-02-28T10:22:24.133 回答
0

只需将parent的pathMath 属性设置为'prefix'值并给他一个链接。在此之后，设置具有“完整”值的孩子的pathMath道具。

查看我的示例作品：

{
        title: 'Security',
        icon: 'lock-outline',
        link: '/security',
        pathMatch: 'prefix',
        children: [
          {
            title: 'User',
            pathMatch: 'full',
            link: '/security/user',
            selected: false,
          }]
}

注意：您的路线应使用菜单项的精确链接设置，如下所示：

  {
    path: 'security/user',
    loadChildren: () =>
      import('./pages/security/register-user/register-user.module').then(
        (m) => m.RegisterUserModule,
      ),
  },
于 2020-07-08T20:23:05.267 回答
0

它有效，您可以尝试此代码。

{
title: "Dashboard",
icon: "people-outline",
link: "/dashboard"
 },
 {
title: "Calendar",
icon: "pie-chart-outline",
children: [
  {
    title: "Day-cell",
    link: "/day-cell"

  },

]
 },
于 2019-11-14T08:57:28.877 回答