Question

在示例项目中，我正在使用星云状菜单。我有以下情况。我想边栏中有4个菜单项，每个菜单项都有4到5个子菜单。

例如

menu 1 
    submenu 1
    submenu 2
menu 2
    submenu 1 
    submenu 2
    submenu 3
menu 3
menu 4

以此类推。

现在，当我单击菜单1时，可以看到2个菜单，现在单击子菜单2，它将使我偏向该特定页面。现在，如果我单击菜单2，我会看到3个子菜单，如果我单击子菜单3，它会将我重定向到该特定页面，

现在的问题是，两个菜单都在侧栏中打开，我可以看到所有子菜单。如果其他菜单已打开，我想关闭侧边栏中的上一个菜单。在星云状菜单中这可能吗？任何帮助表示赞赏。

请检查下面的链接以供参考，（也可以尝试单击与我的情况相同的侧边栏菜单。）

https://akveo.github.io/nebular/docs/components/menu/api#nbmenucomponent

这是我的侧边栏菜单代码供参考。

import { Component, OnDestroy } from '@angular/core';
import { delay, withLatestFrom, takeWhile } from 'rxjs/operators';
import {
  NbMediaBreakpoint,
  NbMediaBreakpointsService,
  NbMenuItem,
  NbMenuService,
  NbSidebarService,
  NbThemeService,
} from '@nebular/theme';

import { StateService } from '../../../@core/data/state.service';

// TODO: move layouts into the framework
@Component({
  selector: 'app-sample-layout',
  styleUrls: ['./sample.layout.scss'],
  template: `
    <nb-layout [center]="layout.id === 'center-column'" windowMode>
      <nb-layout-header fixed>
    <app-header [position]="sidebar.id === 'start' ? 'normal':                  
 'inverse'"></app-header>
  </nb-layout-header>
  <nb-sidebar class="menu-sidebar"
  tag="menu-sidebar"
  responsive
  [end]="sidebar.id === 'end'">
      <nb-sidebar-header *ngIf="currentTheme == 'default'">
      <a href="#" class="btn btn-hero-success main-btn">
      <img class="sidebar-logo" src="assets/images/icon.png" alt="menu" /> <span class="sidebar-title">MENU </span>
      </a>
      </nb-sidebar-header>
      <ng-content select="nb-menu"></ng-content>
      </nb-sidebar>
  <nb-layout-column class="main-content">
    <ng-content select="router-outlet"></ng-content>
  </nb-layout-column>

  <nb-layout-footer fixed>
    <app-footer></app-footer>
  </nb-layout-footer>
</nb-layout>
       `,
     })
     export class SampleLayoutComponent implements OnDestroy {

       subMenu: NbMenuItem[] = [
         {
           title: 'PAGE LEVEL MENU',
           group: true,
         },
       ];
       layout: any = {};
       sidebar: any = {};

       private alive = true;

       currentTheme: string;

       constructor(protected stateService: StateService,
protected menuService: NbMenuService,
protected themeService: NbThemeService,
protected bpService: NbMediaBreakpointsService,
protected sidebarService: NbSidebarService) {
this.stateService.onLayoutState()
  .pipe(takeWhile(() => this.alive))
  .subscribe((layout: string) => this.layout = layout);

this.stateService.onSidebarState()
  .pipe(takeWhile(() => this.alive))
  .subscribe((sidebar: string) => {
    this.sidebar = sidebar;
  });

const isBp = this.bpService.getByName('is');
this.menuService.onItemSelect()
  .pipe(
    takeWhile(() => this.alive),
    withLatestFrom(this.themeService.onMediaQueryChange()),
    delay(20),
  )
  .subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => {

    if (bpTo.width <= isBp.width) {
      this.sidebarService.collapse('menu-sidebar');
    }
  });

this.themeService.getJsTheme()
  .pipe(takeWhile(() => this.alive))
  .subscribe(theme => {
    this.currentTheme = theme.name;
  });
  }

           ngOnDestroy() {
             this.alive = false;
            }
          }

Answer 1

您可以在autoCollapse组件上设置nb-menu来折叠其他菜单项。像这样：

<app-sample-layout> ... <nb-menu autoCollapse></nb-menu> ... </app-sample-layout>

Answer 2

制作一个json文件，并根据nebular的文档将数据放入其中，然后使用该数据并将其传递给它。无需做额外的工作。

Answer 3

此行是错误的if (bpTo.width <= isBp.width) {

您只声明了bpFrom和bpTo

尝试以下方式

    this.menuService.onItemSelect()
      .pipe(takeWhile(() => this.alive))
      .subscribe(() => this.sidebarService.compact('menu-sidebar'));

您还想做的不是塌陷而是紧凑

在外部或其他菜单项上单击时，如何折叠星状NB菜单侧栏中的菜单项

3 个答案: