LayoutMenus

满足公司内部，菜单使用 ng 9.0+;demo地址

1、开始使用

• 安装
• 使用

2、使用方式

为满足系统上下布局和左右布局，支持LOGO部分存在c-layout-header 及c-layout-side 组件内

菜单数据结构 cMenuList的Menu结构

| name | description | type | required | | ------------ | ----------------- | ----------------- | -------- | | id | ID;组件内部无使用 | number \| string| false | | attributes | 菜单属性集合,可以拥有自定义的属性 | Attributes | true | | children | 子级 | Array<Menu> | false | | show | 是否展开 | boolean | false|

自定义数据[Attributes]

| name | description | type | required | | ------------- | ----------- | ----- | -------- | | title | 标题 | stirng | true | | router | 路由地址 | null \| string | true | | iconImage | 路由图标 | string | - | | notLink | 是否不允许跳转 | boolean | false| | outSideRouter | 是否第三方菜单 | boolean | false | | target | 当outSideRouter为true是，可以设置打开方式 | _blank _parent _self _top | _blank |

头部导航

• c-layout-header整个顶部导航使用

左侧导航

• c-layout-side整体左侧组件使用
• c-layout-slider 整体左侧菜单【基于anted】，使用方式同c-layout-side

整体布局

在使用组件之前先布局结构（可以按自己的结构布局）

安装

npm i layout-menus --save

使用

项目引入LayoutMenusModule

LayoutMenusModule应用在SharedModule中, 具体使用方式如下。因使用到Ant Design需要引入HttpClientModule BrowserAnimationsModule;

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { SharedModule } from './shared/shared.module';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { NotFoundComponent } from './not-found/not-found.component';

@NgModule({
  declarations: [
    AppComponent,
    NotFoundComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    SharedModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { NgZorroAntdModule } from 'ng-zorro-antd';
import { LayoutMenusModule } from 'layout-menus';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    NgZorroAntdModule,
    LayoutMenusModule,
  ],
  exports: [
    NgZorroAntdModule,
    LayoutMenusModule,
  ]
})
export class SharedModule { }

头部导航

参数

| Name | Description | type | required | default | | -------------------- | ------------------------------------------------------------ | ----------------------------- | -------- | ------- | | [cCollapsed] | 左侧菜单是否展开 | boolean | false | false | | [cIsLogo] | 是否在头部展示logo部分 | boolean | false | false | | [cMenuList] | 菜单列表，当为true是，[cLogoRender]和[cLogoConfig]生效 | Array | true | - | | [cLogoRender] | 自定义logo区域的内容, | TemplateRef<void> | false | - | | [cLogoConfig] | logo不使用自定义的结构。可使用参数传值 | json | | | | [cWidth] | logo区域的宽度 | number | false | 180 | | [cCollapsedWidth] | logo区域收起时的宽度 | number | false | 50 | | [cMenuLeft] | 左侧菜单，可以进行自定义 | template: TemplateRef<{ $implicit: menu}> | false | - | | [cMenuLeftBefore] | 左侧菜单之前 | template: TemplateRef<void> | false | - | | [cMenuRight] | 右侧菜单 | template: TemplateRef<void> | false | - | | [isOutSideMenuOpen] | logo区域外部菜单是否展开 | boolean | false | false | | (outsideMouseover) | logo区域外部菜单mouseover事件 | EventEmitter<$event> | false | - | | (outsideMouseleave) | logo区域外部菜单mouseleave事件 | EventEmitter<$event> | false | - | | (clickMenu) | 点击菜单事件 | EventEmitter<Menu> | false | - | | (changeMenu) | 菜单更改的回调 | EventEmitter<Menu> | false | - |

精简头部菜单模式

import { Component } from '@angular/core';
@Component({
  // tslint:disable-next-line:component-selector
  selector: 'demo-layout-header-simple',
  template: `
    <c-layout-header [cMenuList]="menuList" [cCollapsed]="isCollapsed" [cLogoRender]="null"></c-layout-header>
  `,
})
export class DemoLayoutHeaderSimpleComponent {
  public isCollapsed = false;
  public menuList = [];
}

显示右侧菜单。

由于右侧菜单可能拥有不同的事件或者样式，所以没有设置默认模板。但是拥有一套统一的样式，书写时带有正确的class即可；

import { Component } from '@angular/core';

@Component({
  selector: 'demo-layout-header-right-menu',
  template: `
    <c-layout-header [cMenuList]="menuList" [cCollapsed]="isCollapsed" [cLogoRender]="null" [cMenuRight]="rightMenu"></c-layout-header>
    <ng-template #rightMenu>
      <span class="layout-header-container-action">二维码</span>
      <span class="layout-header-container-action">消息通知</span>
      <span class="layout-header-container-action">个人中心</span>
      <span class="layout-header-container-action layout-header-container-action--account">泡泡糖，你好<i nz-icon nzType="down" nzTheme="outline"></i></span>
    </ng-template>
  `
})
export class DemoLayoutHeaderRightMenuComponent {
  public isCollapsed = false;
  public menuList = [];
}

显示左侧logo

import { Component } from '@angular/core';

@Component({
  selector: 'demo-layout-header-logo',
  template: `
    <c-layout-header [cMenuList]="menuList" [cCollapsed]="isCollapsed" [cIsLogo]="true" [cLogoConfig]="logoConfig" ></c-layout-header>
  `
})
export class DemoLayoutHeaderLogoComponent {
  public isCollapsed = false;
  public menuList = [];
  public logoConfig = {
    title: '权限管理',
    outsideIcon: 'menu',
    logoImg: '../assets/logo.png'
  };
}

左侧导航

参数

| Name | Description | type | required | default | | -------------------- | ---------------------------------------- | ----------------------- | -------- | ------- | | [cMenuList] | 菜单列表 | Array | true | - | | [cPaddingLeft] | 菜单左缩进16 + menu._depth * cPaddingLeft | Array | true | 14 | | [cShowTrigger] | 是否显示trigger | boolean | false | true | | [cLogoConfig] | logo不使用自定义的结构。可使用参数传值 | json | false | - | | [cMenuTop] | 在菜单列表区域添加自定义的顶部内容 | TemplateRef<void> | false | - | | [cMenuBottom] | 在菜单区域添加底部自定义的内容 | TemplateRef<void> | false | - | | [cLogoRender] | 自定义logo区域的内容, | TemplateRef<void> | false | - | | [cMenuItemRouter] | 自定义路由列表 | templateRef<void> | false | - | | [cCollapsed] | 当前收起状态 | boolean | false | false | | (cCollapsedChange) | 展开-收起时的回调函数 | EventEmitter<boolean> | false | - | | [isOutSideMenuOpen] | logo区域外部菜单是否展开 | boolean | false | false | | (outsideMouseover) | logo区域外部菜单mouseover事件 | EventEmitter<$event> | false | - | | (outsideMouseleave) | logo区域外部菜单mouseleave事件 | EventEmitter<$event> | false | - | | (clickMenu) | 点击左侧导航事件 | EventEmitter<menu> | false | - |

简单使用

简单使用，只留有菜单部分；

import { Component } from '@angular/core';

@Component({
  selector: 'demo-layout-side-simple',
  template: `
  <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null" [nzCollapsedWidth]="isCollapsed ? 50 : 200">
    <c-layout-side [cMenuList]="menuList" [(cCollapsed)]="isCollapsed" [cLogoRender]="null"></c-layout-side>
  </nz-sider>
  `,
  styles: [`
  nz-sider {
    position: fixed;
    top: 0px;
    bottom: 0;
    box-shadow: 5px 0 4px -4px #ddd;
  }
  `]
})
export class DemoLayoutSideSimpleComponent {
  public isCollapsed = false;
  public menuList = [];
}

带有logo模式

import { Component } from '@angular/core';

@Component({
  selector: 'demo-layout-side-logo',
  template: `
  <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null" [nzCollapsedWidth]="isCollapsed ? 50 : 200">
    <c-layout-side [cMenuList]="menuList" [(cCollapsed)]="isCollapsed" [cLogoConfig]="logoConfig"></c-layout-side>
  </nz-sider>
  `,
  styles: [`
  nz-sider {
    position: fixed;
    top: 0px;
    bottom: 0;
    box-shadow: 5px 0 4px -4px #ddd;
  }
  `]
})
export class DemoLayoutSideLogoComponent {
  public isCollapsed = false;
  public menuList = [];
  public logoConfig = {
    title: '权限管理',
    outsideIcon: 'menu',
    logoImg: '../assets/logo.png'
  };
}

自定义LOGO区域

import { Component } from '@angular/core';

@Component({
  selector: 'demo-layout-side-simple',
  template: `
  <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null" [nzCollapsedWidth]="isCollapsed ? 50 : 200">
    <c-layout-side [cMenuList]="menuList" [(cCollapsed)]="isCollapsed" [cLogoRender]="LogoTemplate"></c-layout-side>
  </nz-sider>
  <ng-template #LogoTemplate>
    <a href="">
      <div class="global-app-menu-logo" [class.global-app-menu-logo--collapsed]="isCollapsed">
        <span class="global-app-menu-logo--title">我是头部的Logo</span>
      </div>
    </a>
  </ng-template>
  `,
  styles: [`
  nz-sider {
    position: fixed;
    top: 0px;
    bottom: 0;
    box-shadow: 5px 0 4px -4px #ddd;
  }
  `]
})
export class DemoLayoutHeaderRightMenuComponent {
  public isCollapsed = false;
  public menuList = [];
}

自定义菜单列表item

import { Component } from '@angular/core';

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'demo-layout-side-custom-menu-item-router',
  template: `
    <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null" [nzCollapsedWidth]="isCollapsed ? 50 : 200">
    <c-layout-side
      [cMenuList]="menuList"
      [(cCollapsed)]="isCollapsed"
      [cLogoConfig]="logoConfig"
      [cMenuItemRouter]="menuItemTemplate"
      ></c-layout-side>
    </nz-sider>

    <ng-template #menuItemTemplate let-menu let-size="size">
      <ng-container *ngIf="menu.attributes.subMenu">
        <div
          nz-tooltip
          [nzTooltipTitle]="isCollapsed ? menu?.attributes?.title : ''"
          nzTooltipPlacement="right"
          class="menu-item"
          [routerLink]="menu.attributes.router"
          routerLinkActive
          #routerRef="routerLinkActive"
          [class.active]="routerRef.isActive && menu.attributes.router"
          [class.open]="menu.show"
        >
          <img [style.width.px]="size" [src]="sanitizer.bypassSecurityTrustUrl(menu.attributes.iconImage)">
            自定义属性subMenu
          <i class="menu-more" nz-icon nzType="right" nzTheme="outline" (click)="expandMore($event, menu)"></i>
        </div>
      </ng-container>

      <ng-container *ngIf="!menu.attributes.subMenu">
        <a class="menu-item" [style.paddingLeft.px]="16 + (cCollapsed ? 0 : (menu?._depth * 12))">
          <img *ngIf="menu?.attributes?.iconImage" [style.width.px]="size" [src]="sanitizer.bypassSecurityTrustUrl(menu.attributes.iconImage)">
          <span>{{menu.attributes.title}}<span>
          <i *ngIf="menu.children && menu.children.length" class="menu-more" nz-icon nzType="right" nzTheme="outline"></i>
        </a>
      </ng-container>
    </ng-template>
  `,
  styles: [`
  nz-sider {
    position: fixed;
    top: 0px;
    bottom: 0;
    box-shadow: 5px 0 4px -4px #ddd;
  }

  nz-content {
    margin: 0 16px;
  }

  c-layout-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: all .2s;
  }
  `]
})
export class DemoLayoutSideCustomMenuItemRouterComponent {
  public isCollapsed = false;
  public menuList = [
    ...
    {
      id: 104,
      attributes: {
        router: null,
        subMenu: true,
        // tslint:disable-next-line:max-line-length
        iconImage: '',
        icon: 'iconfont icon-guanli',
        title: '审批管理'
      },
      children: [
        {
          id: 106,
          attributes: {
            router: '/approval/authority-approval',
            iconImage: null,
            icon: 'authority-approval',
            title: '权限审批'
          },
          children: []
        }
      ]
    }
  ];
  logoConfig = {
    title: '权限管理',
    outsideIcon: 'menu',
    logoImg: '../assets/logo.png'
  };
}

菜单列表增加自定义头部和底部

import { Component } from '@angular/core';

@Component({
  selector: 'demo-layout-side-custom-top-and-bottom',
  template: `
  <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null" [nzCollapsedWidth]="isCollapsed ? 50 : 200">
    <c-layout-side
      [cMenuList]="menuList"
      [(cCollapsed)]="isCollapsed"
      [cLogoConfig]="logoConfig"
      [cMenuTop]="menuTop"
      [cMenuBottom]="menuBottom"
    ></c-layout-side>
  </nz-sider>

  <ng-template #menuTop>
    <div *ngIf="!isCollapsed">菜单列表自定义顶部</div>
  </ng-template>

  <ng-template #menuBottom>
    <div *ngIf="!isCollapsed">菜单列表自定义顶部</div>
  </ng-template>
  `,
  styles: [`
  nz-sider {
    position: fixed;
    top: 0px;
    bottom: 0;
    box-shadow: 5px 0 4px -4px #ddd;
  }
  div {
    height: 64px;
    line-height: 64px;
    text-align: center;
    background: #e4e4e4;
  }
  `]
})
export class DemoLayoutSideCustomTopAndBottomComponent {
  public isCollapsed = false;
  public menuList = [];
}

整体结构

logo在左侧布局

import { Component } from '@angular/core';

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'demo-layout-logo-left',
  template: `
  <nz-layout>
    <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null" [nzCollapsedWidth]="isCollapsed ? 50 : 200">
      <c-layout-side [cMenuList]="menuList" [(cCollapsed)]="isCollapsed" [cLogoConfig]="logoConfig"></c-layout-side>
    </nz-sider>
    <nz-layout [style.marginLeft.px]="isCollapsed ? 50 : 200" [style.marginTop.px]="50">
      <c-layout-header
        [cMenuList]="menuList"
        [cCollapsed]="isCollapsed"
        [cLogoRender]="null"
        [cMenuRight]="rightMenu"
        [style.left.px]="isCollapsed ? 50 : 200"
      ></c-layout-header>
      <nz-content style="margin:0 16px;">
        <div style="padding:24px; background: #fff; min-height: 1360px; margin-top: 20px;">
          <router-outlet></router-outlet>
        </div>
      </nz-content>
    </nz-layout>
  </nz-layout>
  `,
  styles: [`
  nz-sider {
    position: fixed;
    top: 0px;
    bottom: 0;
    box-shadow: 5px 0 4px -4px #ddd;
  }

  nz-content {
    margin: 0 16px;
  }

  c-layout-header {
    position: fixed;
    top: 0;
	left: 0;
    right: 0;
    transition: all .2s;
  }
  `]
})
export class DemoLayoutLogoLeftComponent {
  public isCollapsed = false;
  public menuList = [];
  logoConfig = {
    title: '权限管理',
    outsideIcon: 'menu',
    logoImg: '../assets/logo.png'
  };
}

LOGO在顶部布局

样式效果，同LOGO在左侧布局效果一样；

import { Component } from '@angular/core';

@Component({
  selector: 'demo-layout-logo-top',
  template: `
  <nz-layout>
    <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null" [nzCollapsedWidth]="isCollapsed ? 50 : 200">
      <c-layout-side [cMenuList]="menuList" [(cCollapsed)]="isCollapsed" [cLogoRender]="null"></c-layout-side>
    </nz-sider>
    <nz-layout [style.marginLeft.px]="isCollapsed ? 50 : 200" [style.marginTop.px]="50">
      <c-layout-header
        [cMenuList]="menuList"
        [cCollapsed]="isCollapsed"
        [cIsLogo]="true"
        [cLogoConfig]="logoConfig"
      [cMenuRight]="rightMenu"></c-layout-header>
      <nz-content style="margin:0 16px;">
        <div style="padding:24px; background: #fff; min-height: 1360px; margin-top: 20px;">
          <router-outlet></router-outlet>
        </div>
      </nz-content>
    </nz-layout>
  </nz-layout>
  `,
  styles: [`
  nz-sider {
    position: fixed;
    top: 50px;
    bottom: 0;
    box-shadow: 5px 0 4px -4px #ddd;
  }

  nz-content {
    margin: 0 16px;
  }

  c-layout-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: all .2s;
  }
  `]
})
export class DemoLayoutLogoTopComponent {
  public isCollapsed = false;
  public menuList = [];
  logoConfig = {
    title: '权限管理',
    outsideIcon: 'menu',
    logoImg: '../assets/logo.png'
  };
}