sidebar-nav 主菜单

NG-ALAIN 左边主菜单，依赖于 @delon/theme。

组件的数据来自 MenuService（其结构为 Menu）， MenuService 的操作会自动同步至该组件。

常见问题

为什么会有两个快捷菜单

快捷菜单生成规则统一在 0 索引下查找，并按以下顺序来获取：

1. 【推荐】 children 存在 shortcutRoot: true 则最优先

2. 否则查找带有【dashboard】字样链接，若存在则在此菜单的下方创建快捷入口

3. 否则放在0节点位置

因此，建议在菜单数据的 0 索引下保持一个有效的 shortcutRoot: true 数据。

常见问题

隐藏主菜单项

表示永远不显示菜单，可以在菜单设置 hide: true。

隐藏自动生成导航隐藏面包屑

表示不显示该节点，可以在菜单设置 hideInBreadcrumb: true。

关于层级

虽然支持无限层级，但为了用户体验请保持最多不超过四层（含组别）。

如何更新某个菜单项

当调用 MenuService.setItem(key, newValue) 时会自动重新渲染主菜单，其中 key 必须是存在值，请参考 Menu 的定义。

import { SidebarNavModule } from '@delon/abc/sidebar-nav';

代码演示

基础样例

最简单的用法。

import { Component } from '@angular/core';
import { Menu, MenuService, SettingsService } from '@delon/theme';
import { NzIconService } from 'ng-zorro-antd/icon';
@Component({
  selector: 'components-sidebar-nav-basic',
  template: `
    <nz-switch [ngModel]="collapsed" (ngModelChange)="toggleCollapsed()"></nz-switch>
    <sidebar-nav class="d-block mt-md"></sidebar-nav>
  `,
  host: {
    '[class.d-block]': 'true',
    '[class.alain-default__collapsed]': 'collapsed',
    '[style.width.px]': 'collapsed ? 64 : 200',
  },
})
export class ComponentsSidebarNavBasicComponent {
  menus: Menu[] = [
    {
      text: 'Heading',
      group: true,
      children: [
        {
          text: 'Dashboard <strong>HTML</strong>',
          // Support icon by https://ng.ant.design/components/icon/zh
          // Format: `anticon-{icon key}`
          icon: 'anticon-dashboard',
          badge: 5,
        },
        {
          text: 'Iconfont',
          // Support for iconfont
          icon: { type: 'iconfont', iconfont: 'icon-twitter' },
        },
        {
          text: 'Custom Class Name',
          // Support for custom class
          icon: {
            type: 'class',
            value: 'newClassName',
          },
          children: [{ text: 'Child' }, { text: 'Child' }],
        },
        {
          text: 'Level1',
          // Support for custom images
          icon: {
            type: 'img',
            value: './assets/img/avatar.jpg',
          },
          children: [
            {
              text: 'Level2',
              icon: { type: 'iconfont', iconfont: 'icon-twitter' },
              children: [
                { text: 'Level3A', icon: { type: 'iconfont', iconfont: 'icon-twitter' } },
                { text: 'Level3B-DISABLED', disabled: true },
              ],
            },
            { text: 'Level2-DISABLED', disabled: true },
          ],
        },
      ],
    },
  ];
  constructor(menuSrv: MenuService, public settingsSrv: SettingsService, iconService: NzIconService) {
    menuSrv.add(this.menus);
    iconService.fetchFromIconfont({
      scriptUrl: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
    });
  }
  get collapsed() {
    return this.settingsSrv.layout.collapsed;
  }
  toggleCollapsed() {
    this.settingsSrv.setLayout('collapsed', !this.collapsed);
  }
}

API

sidebar-nav