bixi/packages/core/layout/menu/menu.component.html

企业级中后台前端解决方案

<ul nz-menu nzMode="inline" class="menu" [nzInlineCollapsed]="!open">
  <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menus, level: 1 }"></ng-container>
  <ng-template #menuTpl let-menus let-level="level">
    <ng-container *ngFor="let menu of menus; let idx = index">
      <ng-container *ngIf="menu.group; else menuContent">
        <li nz-menu-group [nzTitle]="menu.titleI18n ? (menu.titleI18n | translate) : menu.title">
          <ul>
            <ng-container
              *ngTemplateOutlet="menuTpl; context: {$implicit: menu.children, level: level + 1 }">
            </ng-container>
          </ul>
        </li>
      </ng-container>
      <ng-template #menuContent>
        <li *ngIf="menu.children && menu.children.length; else subMenu" nz-submenu
          [nzPaddingLeft]="open ? level * paddingLeft : 0" [(nzOpen)]="open && menu.open"
          (nzOpenChange)="onOpenChange($event,menu)"
          [nzTitle]="menu.titleI18n ? (menu.titleI18n | translate) : menu.title "
          [nzIcon]="menu.icon || 'bars'">
          <ul>
            <ng-container
              *ngTemplateOutlet="menuTpl; context: {$implicit: menu.children, level: level + 1 }">
            </ng-container>
          </ul>
        </li>
        <ng-template #subMenu>
          <li nz-menu-item
            [nzPaddingLeft]="level===1?paddingLeft : paddingLeft+(level-1) * paddingLeft"
            class="bixi-menu-item" [ngClass]="{'first-item': idx===0 && level === 1}"
            [routerLink]="menu.link" nz-tooltip nzTooltipPlacement="right"
            [nzTooltipTitle]="open ? '' : (menu.titleI18n ? (menu.titleI18n | translate) : menu.title)"
            [nzSelected]="menu.selected" nzPopoverOverlayClassName="bixi-layout-menu-item-tooltip"
            [nzMatchRouter]="true" (click)="onMenuClick(menu)"
            [nzMatchRouterExact]="menu.matchRouterExact">
            <i nz-icon [nzType]="menu.icon" *ngIf="menu.icon"></i>
            <span>{{ menu.titleI18n ? (menu.titleI18n | translate) : menu.title}}</span>
          </li>
        </ng-template>
      </ng-template>
    </ng-container>
  </ng-template>
</ul>

<div class="bixi-menu-toggle" (click)="onToggleClick()">
  <ng-container *ngIf="open; else iconRight">
    <i nz-icon nzType="double-left" nzTheme="outline"></i>
  </ng-container>
  <ng-template #iconRight>
    <i nz-icon nzType="double-right" nzTheme="outline"></i>
  </ng-template>
</div>