Неактивный родительский активный класс не работает

Question

Я использую nebular с Angular 6, столкнувшись с проблемой при нажатии на элемент меню, активный класс на родительском элементе меню не добавлен. но если вы видите http://akveo.com/ngx-admin, когда вы нажимаете "кнопки" внутри "UI-функций", их UI-функции выделяются.

Ниже мой файл 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"
            }
        ]
    },
]

Пожалуйста, помогите мне избавиться от этой проблемы.

Answer 1

В свойстве ссылки каждого отдельного пункта меню я устанавливаю полный путь к нему. Раньше я устанавливал только /componentName вместо /fullpath/componentName

Answer 2

У меня была такая же проблема, я решил удалить "/" в конце ссылки в пункте меню.

Как это:

            {
    title: 'Dashboard',
    icon: 'home-outline',
    link: '/home/',
    home: true,
  },

Он не становится синим, я решил это:

            {
    title: 'Dashboard',
    icon: 'home-outline',
    link: '/home',
    home: true,
  },

Я знаю, что уже поздно, но, возможно, это может помочь кому-то еще. :)

Answer 3

Просто установите свойство 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,
      ),
  },

Answer 4

Это работает, вы можете попробовать этот код.

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

  },

]
 },

Answer 5

Из моих экспериментов и просмотра исходного кода Nebular я смог выяснить следующее:

1. Свойство ссылки NbMenuItemдолжен иметь префикс /.
2. Атрибут, который мы передаем в <nb-menu>элемент должен быть инициализирован с самого начала. Подробности: Существует частный метод setParent()который устанавливает атрибут каждого дочернего элемента меню, и этот метод вызывается только ngOnInitиз NbMenuComponent. Таким образом, другое решение этой проблемы, если инициализация пунктов меню с самого начала невозможна, состоит в том, чтобы установить parentсвойство каждого ребенка самостоятельно с помощью функции setParent.

    частный setParent (элемент: NbMenuItem) {
        item.children && item.children.forEach(child => {
          дочерний.родительский = элемент;
          this.setParent (дочерний);
        });
      }

Тогда позвони setParentна всех элементах itemsсписок т.е. items.map(item => this.setParent(item))