Angular 当单击外部或其他菜单项时，如何折叠nebular菜单中侧栏中的菜单项

在我的示例项目中，我正在使用星云菜单。我有一个场景如下。 我假设侧边栏中有4个菜单项，每个菜单项都有4到5个子菜单

例如

等等

现在当我点击菜单1，我可以看到2个菜单，现在我点击子菜单2，它会引导我进入那个特定的页面。 现在，如果我点击菜单2，我可以看到3个子菜单，如果我点击子菜单3，它会将我重定向到特定页面

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

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

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

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;
            }
          }

从'@angular/core'导入{Component，OnDestroy}；
从'rxjs/operators'导入{delay，withLatestFrom，takeWhile}；
进口{
这个断点，
NBS服务，
NbMenuItem，
NbMenuService，
服务，
NbThemeService，
}来自“@nebular/theme”；
从“../../../@core/data/state.service”导入{StateService}；
//TODO:将布局移动到框架中
@组成部分({
选择器：“应用程序示例布局”，
样式URL:['./sample.layout.scss']，
模板：`
`,
})
导出类SampleLayoutComponent实现OnDestroy{
子菜单：NbMenuItem[]=[
{
标题：“页面级菜单”，
小组:对,，
},
];
布局：any={}；
边栏：any={}；
私生活=真；
当前主题：字符串；
构造函数（受保护的stateService:stateService，
受保护的menuService:NbMenuService，
受保护的电子服务：NbThemeService，
受保护的bpService:NBMediaBreakpsService，
受保护的sidebarService:NbSidebarService）{
this.stateService.onLayoutState（）
.pipe（takeWhile（（）=>this.alive））
.subscribe（（布局：字符串）=>this.layout=layout）；
this.stateService.onSidebarState（）
.pipe（takeWhile（（）=>this.alive））
.subscribe（（侧栏：字符串）=>{
this.sidebar=侧边栏；
});
const isBp=this.bpService.getByName（'is'）；
this.menuService.onItemSelect（）文件
.烟斗(
takeWhile（（）=>这个。活着），
使用LatestFrom（this.themeService.onMediaQueryChange（）），
延迟（20），
)
.subscribe（（[item[bpFrom，bpTo]]：[any[NbMediaBreakpoint，NbMediaBreakpoint]]）=>{
if（bpTo.width this.alive））
.订阅（主题=>{
this.currentTheme=theme.name；
});
}
恩贡德斯特罗（）{
this.alive=false；
}
}

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

您可以在

nb menu

组件上设置

autoCollapse

，以折叠其他菜单项。 像这样：

  ...
  <nb-menu autoCollapse="true"></nb-menu>
  ...
</app-sample-layout>

。。。
...

如果（bpTo.width），则此行是错误的

  ...
  <nb-menu autoCollapse="true"></nb-menu>
  ...
</app-sample-layout>

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