ng-alain对sidebar-nav进行修改实现菜单布局切换

 一、背景

希望菜单项可以放在顶部

之前使用样式修改修改过第一版，后来发现问题较多，而且样式修改起来特别麻烦，因此通过对sidebar-nav的修改满足需求。

二、实现 

1、主要是通过修改sidebar-nav.component.js，实现新的nav组件

// =========LAYOUTS=========
@import './../../../styles/theme';
@import './../../../styles/index';

.ad-nav-head-div {
  float: left;
  margin-left: 20px;
  width: 100%;
  height: 60px;
}
.ad-nav-head {
  float: left;
  list-style-type: none;
  margin-top: -10px;
  border-right: 1px solid @content-heading-border;
  .ad-nav-li-head {
    float: left;
    list-style-type: none;
    border-left: 0 solid transparent;
    border-bottom: 0 solid transparent;
    transition: border-bottom-color 0.4s ease;
    .ad-nav-li-hend-ui {
      float: left;
      list-style-type: none;
      position: absolute;
      top: 48px;
      background-color: @aside-bg;
    }
  }
  .ad-nav__-head-selected {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100%;
    background-position: center center;
    background-image: url('../../../assets/img/nav/nav-selected-bg.png');
  }
  .ad-nav__-head-selected > a {
    color: @blue-color2;
  }
}
.ad-nav-li-head-hidden {
  display: none !important;
}

import {
  Component,
  OnInit,
  HostListener,
  ChangeDetectorRef,
  ElementRef,
  Renderer2,
  Input,
  Output,
  EventEmitter,
  OnDestroy,
  AfterViewInit,
} from '@angular/core';
import { LayoutChangeService } from '@core/layout/layoutChange.service';
import { Router, NavigationEnd } from '@angular/router';
import { LocationStrategy } from '@angular/common';
import { MenuService, SettingsService, Menu } from '@delon/theme';
import { filter } from 'rxjs/operators';
import { Subscription } from 'rxjs/Subscription';
/** @type {?} */
const SHOWCLS = 'ad-nav__floating-show';
/** @type {?} */
const FLOATINGCLS = 'ad-nav__floating';
/*头部selected样式*/
const HEDNSELECTED = 'ad-nav__-head-selected';
/*左树选中样式*/
const LEFTSELECTED = 'ad-nav__selected';

@Component({
  selector: 'app-header-nav',
  template: `
    <div [ngClass]="{'ad-nav-head-div' : loyout}">
      <ul class="ad-nav" [ngClass]="{'ad-nav-head': loyout}">
        <ng-container *ngFor="let group of list">
          <ng-template [ngIf]="group._hidden !== true">
            <li class="ad-nav__item ad-nav__group-title" [ngClass]="{'ad-nav-li-head': loyout, 
            'ad-nav-li-head-hidden': group.text === '导航菜单' ? true : false}" 
                *ngIf="group.group"><span>{{ group.text }}</span></li>
            <ng-container *ngFor="let child1 of group.children">
              <li *ngIf="child1._hidden !== true" routerLinkActive="{{routerLinkActive}}" 
                  [ngClass]="{'ad-nav-li-head': loyout}"
                  [routerLinkActiveOptions]="{exact: child1.linkExact}"
                  class="ad-nav__item" [class.ad-nav__open]="child1._open">
                <a *ngIf="child1._type === 1"
                      (click)="onSelect(child1)"
                      [routerLink]="child1.link"
                      [target]="child1.target">
                  <i *ngIf="!settings.layout.collapsed" [hidden]="loyout" class="{{ child1.icon }}"></i>
                  <nz-tooltip *ngIf="settings.layout.collapsed" nzPlacement="right" [nzTitle]="child1.text">
                    <span nz-tooltip> <i class="{{ child1.icon }}"></i> </span>
                  </nz-tooltip>
                  <span>{{ child1.text }}</span>
              </a>
                <a *ngIf="child1._type === 2" href="{{ child1.externalLink }}" target="{{child1.target}}"
                   data-type="external">
                  <i *ngIf="!settings.layout.collapsed" [hidden]="loyout" class="{{ child1.icon }}"></i>
                  <nz-tooltip *ngIf="settings.layout.collapsed" nzPlacement="right" [nzTitle]="child1.text">
                    <span nz-tooltip> <i class="{{ child1.icon }}"></i> </span></nz-tooltip>
                  <span>{{ child1.text }}</span> 
                </a>
                <a *ngIf="child1._type === 3" class="ad-nav__sub-title"
                    (mouseleave)="toggleOpen(child1, false)"
                   (click)="toggleOpenFun(child1)" (mouseenter)="showSubMenu($event, child1, true)">                            
                    <i [hidden]="loyout && !settings.layout.collapsed" class="{{ child1.icon }}"></i> 
                  <span>{{ child1.text }}</span>
                </a>
                <div *ngIf="child1.badge" title="{{child1.badge}}" class="badge badge-{{child1.badge_status}}"
                  [class.badge-dot]="child1.badge_dot"><em>{{child1.badge}}</em></div>
                <ul *ngIf="child1._type === 3" [ngClass]="{'ad-nav-li-hend-ui': loyout}"
                    (mouseenter)="checkPosition(child1, true)" (mouseleave)="checkPosition(child1, false)"
                    class="ad-nav ad-nav__sub ad-nav__depth{{child1._depth}}">
                  <ng-container *ngFor="let child2 of child1.children">
                    <li *ngIf="child2._hidden !== true"
                      routerLinkActive="{{routerLinkActive}}" [routerLinkActiveOptions]="{exact: child2.linkExact}"
                        class="ad-nav__item" [class.ad-nav__open]="child2._open">
                    <a *ngIf="child2._type === 1"
                              (click)="onSelect(child2)"
                              [routerLink]="child2.link"
                              [target]="child2.target">{{ child2.text}}
                      </a>
                      <a *ngIf="child2._type === 2" href="{{ child2.externalLink }}"
                         target="{{ child2.target }}" data-type="external">{{ child2.text }}
                    </a>
                      <a *ngIf="child2._type === 3" class="ad-nav__sub-title" 
                         (click)="toggleOpenFun(child2)"> {{ child2.text}}
                      </a>
                      <div *ngIf="child2.badge" title="{{child2.badge}}" class="badge badge-{{child2.badge_status}}"
                      [class.badge-dot]="child2.badge_dot"><em>{{child2.badge}}</em></div>
                      <ul [ngClass]="{'ad-nav-li-hend-ui': loyout}"
                          (mouseenter)="checkPosition(child2, true)" (mouseleave)="checkPosition(child2, false)"
                          *ngIf="child2._type=== 3"class="ad-nav ad-nav__sub ad-nav__depth{{child2._depth}}">
                        <ng-container *ngFor="let child3 of child2.children">
                          <li *ngIf="child3._hidden !== true"
                            routerLinkActive="{{routerLinkActive}}" [routerLinkActiveOptions]="{exact: child3.linkExact}"
                              class="ad-nav__item" [class.ad-nav__open]="child3._open">
                          <a *ngIf="child3._type === 1"
                               (click)="onSelect(child3)"
                               [routerLink]="child3.link"
                               [target]="child3.target">{{ child3.text}}                                                   
                          </a>
                            <a *ngIf="child3._type === 2" href="{{ child3.externalLink }}"
                               target="{{ child3.target }}" data-type="external">{{ child3.text }}</a>
                            <div *ngIf="child3.badge" title="{{child3.badge}}" class="badge badge-{{child3.badge_status}}"
                            [class.badge-dot]="child3.badge_dot"><em>{{child3.badge}}</em></div>
                          </li>
                        </ng-container>
                      </ul>
                    </li>
                  </ng-container>
                </ul>
              </li>
            </ng-container>
          </ng-template>
        </ng-container>
      </ul>
    </div>
  `,
  styleUrls: ['./header.nav.Component.less'],
})

//  extends SidebarNavComponent
export class HeaderNavComponent implements OnInit, OnDestroy, AfterViewInit {
  constructor(
    public menuSrv: MenuService,
    public settings: SettingsService,
    public router: Router,
    public locationStrategy: LocationStrategy,
    public render: Renderer2,
    public cd: ChangeDetectorRef,
    public el: ElementRef,
    public layoutService: LayoutChangeService,
  ) {
    this.subscription = layoutService.Status$.subscribe(message => {
      // 获取当前的布局状态
      this.loyout = message;
      this.initCollapsed();
      this.setRouterLinkActive();
      this.initSidebar('init');
    });
  }
  subscription: Subscription;
  public loyout = this.layoutService.getLayout;
  bodyEl: any;
  list = [];
  doc = document;
  @Input() autoCloseUnderPad = true;
  @Output('select') select = new EventEmitter();
  rootEl = this.el.nativeElement;
  private change$: any;
  floatingEl: HTMLDivElement;
  private routerLinkActive: any = this.initRouterLinkActive();
  private route$;
  private sidebar$;
  // 确定光标是否在下拉菜单上面
  private isOnUl = false;
  // 监听切换ipad按钮事件
  @HostListener('document:click', ['$event.target'])
  onClick() {
    this.hideAll();
  }
  // propDecorators = {
  //   autoCloseUnderPad: [{ type: Input }],
  //   select: [{ type: Output }],
  //   onClick: [{type: HostListener, args: ['document:click', ['$event.target']]}]
  // };
  /**
   * 对选中样式进行初始化
   */
  public initRouterLinkActive() {
    this.routerLinkActive = this.loyout ? HEDNSELECTED : LEFTSELECTED;
  }

  /**
   * 切换时交替设置选中的样式
   */
  private setRouterLinkActive() {
    this.initRouterLinkActive();
    let oldSelectDom;
    let delClassName;
    let addClassName;
    if (this.loyout) {
      addClassName = HEDNSELECTED;
      delClassName = LEFTSELECTED;
      oldSelectDom = this.rootEl.querySelector('.' + LEFTSELECTED);
    } else {
      addClassName = LEFTSELECTED;
      delClassName = HEDNSELECTED;
      oldSelectDom = this.rootEl.querySelector('.' + HEDNSELECTED);
    }
    this.render.addClass(oldSelectDom, addClassName);
    this.render.removeClass(oldSelectDom, delClassName);
  }
  ngOnInit() {
    const me = this;
    this.bodyEl = this.doc.querySelector('body');
    this.menuSrv.openedByUrl(this.router.url);
    this.genFloatingContainer();
    this.change$ = /** @type {?} */ (this.menuSrv.change.subscribe(function(
      res,
    ) {
      me.list = res;
      me.cd.detectChanges();
    }));
    this.installUnderPad();
    this.initRouterLinkActive();
  }

  ngAfterViewInit() {
    this.initCollapsed();
    this.sidebar$ = this.bodyEl.querySelector('app-sidebar');
    this.initSidebar('init');
  }

  /**
   * 处理当ipad场景是 menu在上面需要把ipad按钮隐藏
   */
  initCollapsed() {
    if (this.settings.layout.collapsed && this.loyout) {
      this.settings.setLayout('collapsed', !this.settings.layout.collapsed);
    }
  }
  /**
   * 处理在顶部的高度 避免遮挡tip
   * @param type init show hide
   */
  initSidebar(type) {
    const me = this;
    const dom = me.sidebar$ || this.bodyEl.querySelector('app-sidebar');
    if (me.loyout) {
      switch (type) {
        case 'show':
          if (dom.style.height !== '') {
            dom.style.height = '';
          }
          break;
        case 'hide':
          if (dom.style.height === '') {
            dom.style.height = '60px';
          }
          break;
        default:
          if (dom.style.height === '') {
            dom.style.height = '60px';
          }
      }
    } else {
      if (dom.style.height !== '') {
        dom.style.height = '';
      }
    }
  }

  /**
   * 设置app-sidebar高度 将app-sidebar显示出来
   */
  showSidebar() {
    this.initSidebar('show');
  }
  /**
   * 设置app-sidebar高度 将app-sidebar隐藏
   */
  hideSidebar() {
    this.initSidebar('hide');
  }
  floatingAreaClickHandle(e) {
    e.stopPropagation();
    /** @type {?} */
    const linkNode = /** @type {?} */ (e.target);
    if (linkNode.nodeName !== 'A') {
      return false;
    }
    /** @type {?} */
    let url = linkNode.getAttribute('href');
    if (url && url.startsWith('#')) {
      url = url.slice(1);
    }
    if (linkNode.dataset['type'] === 'external') {
      return true;
    }
    /** @type {?} */
    const baseHerf = this.locationStrategy.getBaseHref();
    if (baseHerf) {
      url = url.slice(baseHerf.length);
    }
    this.router.navigateByUrl(url);
    this.onSelect(this.menuSrv.getPathByUrl(url).pop());
    this.hideAll();
    e.preventDefault();
    return false;
  }

  clearFloatingContainer() {
    if (!this.floatingEl) {
      return;
    }

    this.floatingEl.removeEventListener(
      'click',
      this.floatingAreaClickHandle.bind(this),
    );
    // fix ie: https://github.com/cipchk/delon/issues/52
    if (this.floatingEl.hasOwnProperty('remove')) {
      this.floatingEl.remove();
    } else if (this.floatingEl.parentNode) {
      this.floatingEl.parentNode.removeChild(this.floatingEl);
    }
  }
  genFloatingContainer() {
    this.clearFloatingContainer();
    this.floatingEl = this.render.createElement('div');
    this.floatingEl.classList.add(FLOATINGCLS + '-container');
    this.floatingEl.addEventListener(
      'click',
      this.floatingAreaClickHandle.bind(this),
      false,
    );
    this.bodyEl.appendChild(this.floatingEl);
  }
  genSubNode(linkNode, item) {
    /** @type {?} */
    const id = '_sidebar-nav-' + item['__id'];
    /** @type {?} */
    const node = /** @type {?} */ (linkNode.nextElementSibling.cloneNode(true));
    node.id = id;
    node.classList.add(FLOATINGCLS);
    node.addEventListener(
      'mouseleave',
      function() {
        node.classList.remove(SHOWCLS);
      },
      false,
    );
    this.floatingEl.appendChild(node);
    return node;
  }
  hideAll() {
    /** @type {?} */
    const allNode = this.floatingEl.querySelectorAll('.' + FLOATINGCLS);
    for (let i = 0; i < allNode.length; i++) {
      allNode[i].classList.remove(SHOWCLS);
    }
  }
  calPos(linkNode, node) {
    /** @type {?} */
    const rect = linkNode.getBoundingClientRect();
    /** @type {?} */
    const scrollTop = Math.max(
      this.doc.documentElement.scrollTop,
      this.bodyEl.scrollTop,
    );
    /** @type {?} */
    const docHeight = Math.max(
      this.doc.documentElement.clientHeight,
      this.bodyEl.clientHeight,
    );
    /** @type {?} */
    let offsetHeight = 0;
    if (docHeight < rect.top + node.clientHeight) {
      offsetHeight = rect.top + node.clientHeight - docHeight;
    }
    node.style.top = rect.top + scrollTop - offsetHeight + 'px';
    node.style.left = rect.right + 5 + 'px';
  }

  /**
   * ipad 产品下 鼠标放在图标上显示菜单
   * @param e
   * @param item
   * @param type
   */
  showSubMenu(e, item, type) {
    if (this.loyout) {
      this.toggleOpen(item, type);
      return;
    }
    if (this.settings.layout.collapsed !== true) {
      return;
    }
    e.preventDefault();
    /** @type {?} */
    const linkNode = /** @type {?} */ (e.target);
    this.genFloatingContainer();
    /** @type {?} */
    const subNode = this.genSubNode(/** @type {?} */ (linkNode), item);
    this.hideAll();
    subNode.classList.add(SHOWCLS);
    this.calPos(/** @type {?} */ (linkNode), subNode);
  }

  /**
   * 对外接口
   * @param item
   */
  onSelect(item) {
    this.select.emit(item);
  }

  /**
   * 判断是否在下来菜单上
   */
  checkPosition(item, type) {
    if (this.loyout) {
      this.isOnUl = type;
      if (!type) {
        this.toggleOpen(item, type);
      }
    }
  }
  toggleOpen(item, type) {
    if (this.loyout) {
      // 鼠标在menu上 将menu显示出来
      setTimeout(() => {
        if (this.isOnUl) {
          return;
        }
        this.toggleOpenHead(item, type);
      }, 300);
    }
  }

  /**
   * 处理头部显示隐藏
   * @param item
   * @param type
   */
  toggleOpenHead(item, type) {
    if (type) {
      this.showSidebar();
    } else {
      this.hideSidebar();
    }
    this.menuSrv.visit(function(i, p) {
      if (i !== item) {
        i['_open'] = false;
      }
    });
    /** @type {?} */
    let pItem = item['__parent'];
    while (pItem) {
      pItem._open = true;
      pItem = pItem.__parent;
    }
    item._open = type;
    this.cd.markForCheck();
  }

  /**
   *
   * @param item
   */
  toggleOpenFun(item) {
    if (this.loyout) {
      return;
    }
    this.menuSrv.visit(function(i, p) {
      if (i !== item) {
        i['_open'] = false;
      }
    });
    /** @type {?} */
    let pItem = item['__parent'];
    while (pItem) {
      pItem._open = true;
      pItem = pItem.__parent;
    }
    item._open = !item._open;
    this.cd.markForCheck();
  }

  ngOnDestroy() {
    this.change$.unsubscribe();
    this.subscription.unsubscribe();
    if (this.route$) {
      this.route$.unsubscribe();
    }
    this.clearFloatingContainer();
  }

  installUnderPad() {
    const me = this;
    if (!this.autoCloseUnderPad) return;
    this.route$ = /** @type {?} */ (this.router.events
      .pipe(
        filter(function(e) {
          return e instanceof NavigationEnd;
        }),
      )
      .subscribe(function(s) {
        return me.underPad();
      }));
    this.underPad();
  }
  underPad() {
    const me = this;
    if (window.innerWidth < 992 && !this.settings.layout.collapsed) {
      setTimeout(function() {
        return me.settings.setLayout('collapsed', true);
      });
    }
  }
}