ng-zorro-antd 菜单类型动态切换实战：在 inline 与 vertical 模式之间自由切换

UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读菜单Menu是导航类页面的核心组件而动态切换菜单类型是后台管理系统中最常见的一类交互需求——同一套菜单结构需要跟随用户偏好或设备宽度在inline内联与vertical垂直弹出两种模式间即时切换甚至同步切换light/dark主题。本篇基于 ng-zorro-antd 官方演示switch-mode展开先给出可直接复制的完整示例代码再深入 menu.directive.ts 与 submenu.component.ts 源码讲清模式切换背后子菜单渲染形态如何改变、打开状态如何重置的底层机制。读完你可以独立实现一个可实时切换模式与主题的导航菜单。演示场景展示动态切换模式该演示的核心意图只有一句话展示动态切换模式between inline and vertical。它通过两个nz-switch开关分别控制菜单类型Modevertical与inline之间切换菜单主题Themedark与light之间切换。切换是即时的无需重新渲染页面菜单内的三级子菜单结构保持不变。这正是 switch-mode.ts 所呈现的效果也是它区别于其他 demo如固定模式的 vertical、inline的关键模式作为可变的响应式状态绑定到[nzMode]。完整可运行示例代码拆解官方演示的完整代码如下见 switch-mode.tsimport { Component, signal } from angular/core; import { FormsModule } from angular/forms; import { NzDividerModule } from ng-zorro-antd/divider; import { NzMenuModule } from ng-zorro-antd/menu; import { NzSwitchModule } from ng-zorro-antd/switch; Component({ selector: nz-demo-menu-switch-mode, imports: [FormsModule, NzDividerModule, NzMenuModule, NzSwitchModule], template: nz-switch [(ngModel)]mode / Change Mode nz-divider nzTypevertical / nz-switch [(ngModel)]dark / Change Theme br / br / ul nz-menu [nzMode]mode() ? vertical : inline [nzTheme]dark() ? dark : light li nz-submenu nzTitleNavigation One nzIconmail ul li nz-menu-group nzTitleItem 1 ul li nz-menu-itemOption 1/li li nz-menu-itemOption 2/li /ul /li li nz-menu-group nzTitleItem 2 ul li nz-menu-itemOption 3/li li nz-menu-itemOption 4/li /ul /li /ul /li li nz-submenu nzTitleNavigation Two nzIconappstore ul li nz-menu-itemOption 5/li li nz-menu-itemOption 6/li li nz-submenu nzTitleSubmenu ul li nz-menu-itemOption 7/li li nz-menu-itemOption 8/li /ul /li /ul /li li nz-submenu nzTitleNavigation Three nzIconsetting ul li nz-menu-itemOption 9/li li nz-menu-itemOption 10/li li nz-menu-itemOption 11/li /ul /li /ul , styles: [nz-menu] { width: 240px; } }) export class NzDemoMenuSwitchModeComponent { readonly mode signal(false); readonly dark signal(false); }关键点逐项说明模块依赖NzMenuModule提供nz-menu指令及子组件NzSwitchModule提供开关NzDividerModule用于分隔两个开关FormsModule是[(ngModel)]双向绑定所必需。状态管理组件用 Angular 的signal声明mode与dark两个布尔状态默认均为false即初始呈现inline模式 light主题。双向数据流nz-switch [(ngModel)]mode /把开关值与信号绑定模板中通过mode() ? vertical : inline三元表达式实时计算nzMode取值。开关一拨菜单类型即刻变化。菜单结构三个nz-submenu顶级子菜单Navigation One / Two / Three内部混合使用nz-menu-group分组、nz-menu-item菜单项以及嵌套的二级nz-submenuSubmenu覆盖了内联模式下最常见的多级场景。样式上给[nz-menu]固定了240px宽度便于观察内联与垂直弹出两种形态的差异。模式与主题相关的核心 API模式切换本质上是在操作[nz-menu]指令的两个输入属性。下表整理自菜单官方文档 doc/index.en-US.md并对照 menu.directive.ts 源码中的实际默认值属性说明类型默认值[nzMode]菜单类型支持vertical、horizontal、inlinevertical \| horizontal \| inlinevertical[nzTheme]菜单颜色主题light \| darklight[nzInlineCollapsed]inline模式下是否折叠booleanfalse[nzInlineIndent]inline模式下每一级菜单项的缩进像素值number24[nzSelectable]是否允许选中菜单项booleantrue(nzClick)点击nz-menu-item时的输出事件EventEmitterNzMenuItemComponent—其中nzMode与nzTheme的取值类型在 menu.types.ts 中有明确定义export type NzMenuModeType vertical | horizontal | inline; export type NzMenuThemeType light | dark; export type NzSubmenuTrigger hover | click;nz-submenu子组件还支持nzTriggerSubMenuActionhover | click默认hover控制展开触发方式、nzPlacement控制弹出位置默认bottomLeft、nzOpen默认false控制受控展开状态等详见 submenu.component.ts。源码视角模式切换时内部发生了什么动态切换不是简单的样式替换而是组件内部状态机的一次联动。沿着 menu.directive.ts 的代码可以看清整条链路。1. 输入变化被转发到响应式流NzMenuDirective持有两个BehaviorSubjectmode$与inlineCollapsed$。ngOnChanges中一旦检测到nzMode变化就会把新值推入mode$并主动将所有子菜单的打开状态置为关闭if (nzMode) { this.mode$.next(this.nzMode); if (!nzMode.isFirstChange() this.listOfNzSubMenuComponent) { this.listOfNzSubMenuComponent.forEach(submenu submenu.setOpenStateWithoutDebounce(false)); } }这段代码解释了演示中一个容易被忽略的细节切换模式的瞬间之前展开的子菜单会全部收起。因为inline与vertical的子菜单展开形态完全不同前者是页面内展开后者是浮层弹出保留旧打开状态会造成视觉错乱所以框架选择在模式切换时重置。nzTheme变化则通过setTheme转发给服务层if (nzTheme) { this.nzMenuService.setTheme(this.nzTheme); }2. 模式与折叠共同决定实际模式menu.directive.ts 在ngOnInit中用combineLatest合并inlineCollapsed$与mode$计算出实际生效的模式combineLatest([this.inlineCollapsed$, this.mode$]) .pipe(takeUntilDestroyed(this.destroyRef)) .subscribe(([inlineCollapsed, mode]) { this.actualMode inlineCollapsed ? vertical : mode; this.nzMenuService.setMode(this.actualMode); this.cdr.markForCheck(); });也就是说即便nzMode设为inline一旦nzInlineCollapsed为true实际模式也会降级为vertical折叠态用弹出浮层展示子菜单。这为后续扩展折叠交互提供了伏笔。3. 服务层广播模式与主题MenuService 是菜单内部各组件共享的中枢通过BehaviorSubject广播状态mode$、theme$、inlineIndent$、isChildSubMenuOpen$等并提供setMode/setTheme/setInlineIndent方法。菜单项与子菜单都订阅这些流来响应变化这正是一个开关、全局联动得以实现的原因。4. 子菜单按模式选择渲染形态这是模式切换最直观的源码体现。在 submenu.component.ts 的模板中if (mode inline)分支渲染内联子菜单nz-submenu-inline-child通过折叠动画在页面内展开否则渲染非内联子菜单nz-submenu-none-inline-child配合cdkConnectedOverlay以浮层弹出if (mode inline) { div nz-submenu-inline-child [open]nzOpen ... ng-template [ngTemplateOutlet]subMenuTemplate / /div } else { ng-template cdkConnectedOverlay [cdkConnectedOverlayPositions]overlayPositions [cdkConnectedOverlayOrigin]origin [cdkConnectedOverlayOpen]nzOpen ... ... /ng-template }子菜单组件在ngOnInit中订阅mode$并据模式切换浮层的定位列表if (mode horizontal) { this.overlayPositions [POSITION_MAP[this.nzPlacement], ...listOfHorizontalPositions]; } else if (mode vertical) { this.overlayPositions listOfVerticalPositions; }vertical模式弹出面板出现在子菜单项右侧或左侧rightTop / right / rightBottom / leftTop / left / leftBottomhorizontal模式弹出面板出现在下方bottomLeft / bottomRight / topRight / topLeft。动画也随之区分在 submenu-non-inline-child.component.ts 中vertical使用ant-zoom-big缩放动画horizontal使用slide-up上滑动画。5. 菜单项与层级缩进inline模式最显著的视觉特征是多级缩进。在 menu-item.component.ts 中菜单项订阅mode$与inlineIndent$仅在inline模式下按层级计算缩进this.inlinePaddingLeft mode inline ? this.level * inlineIndent : null;对应 submenu.component.ts 中同样的计算逻辑inlinePaddingLeft mode inline ? this.level * inlineIndent : null。默认nzInlineIndent 24即每深入一级缩进 24px。三种模式的适用场景与子菜单行为对比模式子菜单形态典型场景演示参考inline页面内折叠展开nz-submenu-inline-child 折叠动画侧边导航、多级目录树inline demovertical右侧/左侧浮层弹出zoom-big 动画下拉式导航、抽屉内菜单vertical demohorizontal下方浮层弹出slide-up 动画顶部导航栏horizontal demo此外 inline-collapsed.ts 演示了inline模式下的折叠态折叠时actualMode降级为vertical子菜单改以浮层展示——这与上文combineLatest的逻辑完全对应。扩展实战把模式切换接入布局骨架switch-mode演示的是一块独立菜单的切换。在实际后台系统中更常见的做法是把mode状态提升到根组件与 Layout 的Sider联动侧边栏展开时菜单为inline收起时切换为vertical弹出。也可以参考 sider-current.ts 的侧边栏中选中项自动高亮写法结合nzMatchRouter让菜单跟随路由高亮再配合 theme.ts 将nzTheme状态与全局主题配置统一管理。实现时需注意两点若菜单放在侧边栏中应让nz-menu的宽度与Sider宽度保持一致避免vertical弹出浮层定位偏差模式切换会重置所有子菜单的展开状态源码已保证因此不要依赖切换前后子菜单保持展开的行为必要时在切换后通过nzOpen受控属性主动恢复。小结切换菜单类型演示虽小却是理解 ng-zorro-antd 菜单架构的最佳入口一个nzMode输入背后串联起NzMenuDirective的响应式流、MenuService的状态广播、子菜单按模式切换渲染形态内联展开 vs CDK Overlay 浮层、定位与动画的联动以及菜单项层级缩进的重算。掌握这条链路后无论是要做顶部导航、侧边导航还是折叠交互都能基于同一套菜单结构快速落地。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐Ant Design Menu 动态切换模式实战在 inline 与 vertical 之间实时切换导航布局Ant Design Menu 动态切换模式实战在 inline 与 vertical 之间实时切换导航布局 导读 本文基于 ant design 仓库 Me前端UI组件设计系统ng-zorro-antd FloatButton 形状详解用 nzShape 在圆形与方形之间切换ng zorro antd FloatButton 形状详解用 nzShape 在圆形与方形之间切换 导读 nz float button 浮动按钮是 nUI组件前端antd ColorPicker 渐变色模式实战用 mode 在单色与线性渐变之间自由切换antd ColorPicker 渐变色模式实战用 mode 在单色与线性渐变之间自由切换 导读 ColorPicker 组件默认只能选取单一颜色而通过 5前端UI组件设计系统上一篇CherryUSB为什么这款嵌入式USB协议栈是资源受限系统的终极解决方案下一篇终极嵌入式USB开发指南为什么CherryUSB是资源受限设备的最佳选择创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考