Как свернуть пункт меню на боковой панели в небулярном NBmenu, если щелкнуть снаружи или другой пункт меню - PullRequest
Новая
       28

Как свернуть пункт меню на боковой панели в небулярном NBmenu, если щелкнуть снаружи или другой пункт меню

0 голосов
/ 18 октября 2018

Я использую небулярное меню в моем примере проекта.У меня есть следующий сценарий.Я предполагаю, что 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;
            }
          }

Ответы [ 2 ]

0 голосов
/ 09 ноября 2018

Вы можете установить autoCollapse для компонента nb-menu, чтобы свернуть другие пункты меню.Как это:

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

0 голосов
/ 08 ноября 2018

создайте файл json и поместите в него данные в соответствии с документами туманности, используйте и передайте эти данные ему.нет необходимости делать дополнительную работу.

...