2

我在我的示例项目中使用星云菜单。我有一个场景如下。我假设侧边栏中有 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;
            }
          }
4

3 回答 3

4

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

  ...
  <nb-menu autoCollapse="true"></nb-menu>
  ...
</app-sample-layout>
于 2018-11-09T09:45:23.940 回答
0

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

于 2018-11-08T11:32:25.893 回答
0

这条线是错误的if (bpTo.width <= isBp.width) {

你只声明了 bpFrom 和 bpTo

尝试一些类似的东西

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

您可能想要做的不是崩溃而是紧凑

于 2020-03-13T22:03:20.020 回答