Angular：系统主页样式设置——菜单栏子菜单横向展开显示

在页面上想在上方展示菜单栏,一级菜单点击后加粗高亮显示，鼠标浮动在菜单上展开二三级菜单，二级菜单加粗，三级菜单展开显示在对应的上级菜单右侧,效果如下图所示：

在页面上显示标题logo,菜单，右侧展示当前用户收到的新消息和登录信息，nav-header.component.html代码如下(仅作参考)：

<div class="top-menu-bar">
  <div class="logo-wrap">
    <img src="../../../assets/img/logo1.png" />
    <nz-divider nzType="vertical"></nz-divider>
    <span>{{ systemTitle }}</span>
  </div>
  <div class="top-menu-nav">
    <nz-tabset [(nzSelectedIndex)]="selectedNavIndex">
      <nz-tab *ngFor="let tab of tabMenus" [nzTitle]="titleTemplate">
        <ng-template #titleTemplate>
          <ng-container *ngIf="tab.childMenu && tab.childMenu.length > 0; else simpleTemp">
            <div nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="bottomLeft"
              style="color: #fff; font-size: 14px;" [(nzVisible)]="tab.isVisiblePop">
              {{ tab.menuName }}
            </div>
            <ng-template #contentTemplate>
              <nz-list class="demo-loadmore-list" [nzDataSource]="tab.childMenu" [nzItemLayout]="'horizontal'"
                [nzRenderItem]="child" nzSize="small">
                <ng-template #child let-child>
                  <nz-list-item [nzContent]="nzContent">
                    <ng-template #nzContent>
                      <div nz-row [nzGutter]="8" class="popover-menu"
                        *ngIf="child.childMenu && child.childMenu.length > 0; else subChildMenu;">
                        <div nz-col nzSpan="4">
                          <span class="menu-second"> {{child.menuName}}</span>
                        </div>
                        <div nz-col nzSpan="20">
                          <div nz-row nzType="flex" [nzGutter]="8">
                            <div nz-col *ngFor="let subChild of child.childMenu">
                              <a><span class="menu-thrid" (click)="navigate(tab, subChild)">
                                  {{subChild.menuName}}</span></a>
                            </div>
                          </div>
                        </div>
                      </div>
                      <ng-template #subChildMenu>
                        <div nz-row [nzGutter]="8" class="popover-menu">
                          <div nz-col>
                            <a><span class="menu-second" (click)="navigate(tab, child)"> {{child.menuName}}</span></a>
                          </div>
                        </div>
                      </ng-template>
                    </ng-template>
                  </nz-list-item>
                </ng-template>
              </nz-list>
            </ng-template>
          </ng-container>
          <ng-template #simpleTemp>
            <a (click)="navigate(tab)" class="simple-tab">
              {{ tab.menuName }}
            </a>
          </ng-template>
        </ng-template>
      </nz-tab>
    </nz-tabset>
  </div>
  <div class="right-action-wrap">
    <nz-badge [nzDot]="alarmNum > 0" [nzStyle]="{ 'box-shadow': 'none' }">
      <i nz-icon type="bell" theme="outline" style="font-size:21px;vertical-align:middle;cursor: pointer;"></i>
    </nz-badge>
    <nz-divider nzType="vertical" style="margin-left: 16px; margin-right: 16px"></nz-divider>
    <div>
      <nz-dropdown nzPlacement="bottomRight">
        <a nz-dropdown>
          <span class="user-icon">
            <i nz-icon type="user" theme="outline" style="font-size: 18px;"></i> </span>{{ loginName }}
        </a>
        <ul nz-menu style="top: 6px;">
          <li nz-menu-item nzDisabled>系统帮助</li>
          <li nz-menu-item nzDisabled>规章制度</li>
          <li nz-menu-item (click)="goMyCenter(1)">个人信息</li>
          <li nz-menu-item (click)="goMyCenter(2)">修改密码</li>
          <li nz-menu-item (click)="exitLogin()">退出系统</li>
        </ul>
      </nz-dropdown>
    </div>
  </div>
</div>

在nav-header.component.ts组件中，使用

@Component({
  selector: 'app-nav-header',
  templateUrl: './nav-header.component.html',
  styleUrls: ['./nav-header.component.scss']
})

 进行自定义标签，这样在其他页面上可以直接使用app-nav-header这个标签获取到当前页面上的所有数据。

页面代码解释：

1、{{ systemTitle }}是页面上使用插值表达式绑定组件(component)上的系统名称字段;

2、对于class="top-menu-nav"这个页面上方的菜单样式，在scss文件中进行设置:

.top-menu-nav {
    flex: 1;
    background: #2f3746;
    border-bottom: 0;
    color: #fff;
    overflow: hidden;
  }

3、使用*ngFor="let tab of tabMenus"进行菜单标签的遍历，组件上@Input() tabMenus = [];这个属性从main.component.html中获得（使用app-nav-header这个自定义标签将nav-header.component.html的内容拿过来显示）：

在main.component.html上：

<!-- 使用自定义标签使用菜单栏内容 -->
<app-nav-header [tabMenus]="menus" (menuChange)="onMenuChange($event)">
</app-nav-header>

<nz-layout class="main-container">
  <nz-header>
    <app-nav-breadcrumb [breadcrumbList]="breadcrumbList" (menuChange)="onMenuChange($event)"></app-nav-breadcrumb>
  </nz-header>
  <nz-content>
    <nz-layout style="height: 100%">
      <nz-content style="height: 100%;overflow-y: hidden;">
        <div class="content-container" [style.height.px]="contentHeight">
          <div class="page-wrap">
            <router-outlet></router-outlet>
          </div>
        </div>
      </nz-content>
    </nz-layout>
  </nz-content>
</nz-layout>

其中menus是调用onMenuChange(event)方法查到菜单列表：

getMenuData() {
    this.menuProvider
      .getMenuList()
      .pipe(untilDestroyed(this))
      .subscribe(
        data => {
          this.menus = data;
          this.cdr.detectChanges();
        },
        error => {}
      );
  }

4、ng-zorro-antd提供的popover组件是基于angular/cdk的overlay组件构建的。而overlay组件是有背景层，交互方式是打开一个弹出层，要先关闭才能在打开另一个overlay组件。所以ng-zorro-antd的popover组件交互也是如此。

nzPlacement属性控制菜单内容的显示位置，[nzItemLayout]="'horizontal'"则表示菜单上的元素水平展示。[nzRenderItem]="child"属性渲染子菜单，也就是<ng-template #child let-child>标签中的内容。

同样的[nzContent]="nzContent"则是渲染了<ng-template #nzContent>标签中的内容。

// 弹出菜单
.popover-menu {
  width: 600px;
}

5、三级菜单点击动作：(click)="navigate(tab, subChild)"

  navigate(tab, menu) {
    tab['isVisiblePop'] = false;
    this.menuChange.emit(menu);
  }