在页面上想在上方展示菜单栏,一级菜单点击后加粗高亮显示，鼠标浮动在菜单上展开二三级菜单，二级菜单加粗，三级菜单展开显示在对应的上级菜单右侧,效果如下图所示：
在页面上显示标题logo,菜单，右侧展示当前用户收到的新消息和登录信息，nav-ponent.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-ponent.ts组件中，使用
@Component({selector: 'app-nav-header',templateUrl: './nav-ponent.html',styleUrls: ['./nav-ponent.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 = [];这个属性从ponent.html中获得（使用app-nav-header这个自定义标签将nav-ponent.html的内容拿过来显示）：
在ponent.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);}
