UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载本指南围绕 ng-zorro-antdAngular UI 组件库中的 Menu 导航菜单组件展开完整覆盖nz-menu、nz-menu-item、nz-submenu、nz-menu-group、nz-menu-divider五个核心指令的 API 与实战用法并结合组件源码深入剖析模式切换、路由联动、内联折叠、弹出层定位等底层实现原理。读完本文你将能够在 Angular 项目中独立搭建顶栏、侧边栏及多级嵌套导航菜单并理解其状态管理机制为二次定制打好基础。何时使用导航菜单对网站而言至关重要它帮助用户快速从一个站点分区跳转到另一个分区。常见的导航形态包括顶部导航Top Navigation提供网站的所有分类与功能入口通常采用horizontal水平模式侧边导航Side Navigation提供网站的多层级结构通常采用inline内联或vertical垂直模式。更多与导航相关的布局方案可参考 Layout 布局组件。快速上手最小可用示例NzMenuModule导出全部菜单相关指令在模块或组件中导入即可使用参见 menu.module.tsul nz-menu li nz-menu-itemMenu 1/li li nz-menu-itemMenu 2/li li nz-submenu nzTitleSubMenu Title ul li nz-menu-itemSubMenu Item 1/li li nz-menu-itemSubMenu Item 2/li li nz-menu-itemSubMenu Item 3/li /ul /li /ul这是最基础的组合方式[nz-menu]作用于ul根节点[nz-menu-item]表示叶子菜单项[nz-submenu]包裹子菜单并以内部ul承载下级菜单项。默认情况下菜单以vertical垂直模式、light浅色主题渲染。[nz-menu]根指令[nz-menu]通过NzMenuDirective实现menu.directive.ts它负责菜单的模式、主题、折叠状态等全局配置。参数说明类型默认值[nzInlineCollapsed]菜单inline模式时是否折叠boolean-[nzInlineIndent]inline模式下每级菜单项的缩进像素值number24[nzMode]菜单类型支持vertical、horizontal、inline三种模式vertical \| horizontal \| inlinevertical[nzSelectable]是否允许选中菜单项booleantrue[nzTheme]菜单配色主题light \| darklight(nzClick)点击nz-menu内nz-menu-item时的输出事件EventEmitterNzMenuItemComponent模式nzMode与主题nzTheme三种模式与两种主题的类型定义位于 menu.types.tsexport type NzMenuModeType vertical | horizontal | inline; export type NzMenuThemeType light | dark;从源码看nzMode与nzInlineCollapsed会通过combineLatest组合成一个派生状态actualMode当inline模式且折叠nzInlineCollapsed true时实际渲染模式会被推导为vertical随后通过MenuService.setMode()广播给所有子组件menu.directive.tsthis.actualMode inlineCollapsed ? vertical : mode; this.nzMenuService.setMode(this.actualMode);因此“折叠后的 inline 菜单”本质上是垂直模式 窄宽度布局这一设计避免了折叠时子菜单内联展开的尴尬同时保持弹出式子菜单可用。点击事件nzClick与选中逻辑nzClick输出源自MenuService.descendantMenuItemClick$流。默认情况下nzSelectable true点击某个菜单项后菜单会遍历所有nz-menu-item并把选中态收敛到被点击的那一项menu.directive.tsthis.nzMenuService.descendantMenuItemClick$.subscribe(menu { this.nzClick.emit(menu); if (this.nzSelectable !menu.nzMatchRouter) { this.listOfNzMenuItemDirective.forEach(item item.setSelectedState(item menu)); } });值得注意的是当菜单项启用了路由匹配nzMatchRouter时选中态改由路由驱动手动点击不再接管二者不会互相打架。缩进nzInlineIndentnzInlineIndent默认值为24menu.directive.ts。它会通过MenuService.setInlineIndent()下发nz-menu-item与nz-submenu在inline模式下按层级计算level * inlineIndent的padding-inline-start实现逐级缩进见 menu-item.component.ts。[nz-menu-item]菜单项[nz-menu-item]由NzMenuItemComponent实现menu-item.component.ts渲染为li.ant-menu-item内部通过ng-content投影用户内容。参数说明类型默认值[nzDisabled]是否禁用菜单项booleanfalse[nzSelected]菜单项是否选中booleanfalse[nzMatchRouter]是否根据routerLink自动设置nzSelectedbooleanfalse[nzMatchRouterExact]仅当 URL 与链接完全匹配时才选中语义同routerLinkActiveOptionsbooleanfalse[nzDanger]显示危险样式红色booleanfalse禁用项的行为源码中禁用菜单项在点击时会调用preventDefault()与stopPropagation()直接阻断事件冒泡与默认行为menu-item.component.tsclickMenuItem(e: MouseEvent): void { if (this.nzDisabled) { e.preventDefault(); e.stopPropagation(); return; } ... }与 Router 的路由联动nzMatchRouter的实现依赖注入的Router与RouterLink组件在NavigationEnd事件后检查链接是否激活并通过router.isActive计算激活状态menu-item.component.tsrouter.isActive(link.urlTree || , { paths: this.nzMatchRouterExact ? exact : subset, queryParams: this.nzMatchRouterExact ? exact : subset, fragment: ignored, matrixParams: ignored });即nzMatchRouterExact false时采用subset匹配URL 子集匹配如/home/users可激活/hometrue时采用exact精确匹配。完整可运行示例见 demo/router.ts。[nz-submenu]子菜单子菜单是菜单组件中最复杂的部分同时支持内联展开与弹出层两种渲染形态。三种设置标题的方式!-- 方式一属性字符串 -- li nz-submenu nzTitleSubTitle nzIconappstore/li !-- 方式二[title] 内容投影 -- li nz-submenu span title nz-icon nzTypeappstore / spanSubTitle/span /span /li !-- 方式三TemplateRef 模板 -- li nz-submenu [nzTitle]titleTpl/li ng-template #titleTpl nz-icon nzTypeappstore / spanSubTitle/span /ng-template三种方式分别对应字符串属性、[title]选择器投影与TemplateRefvoid灵活性覆盖从纯文本到富模板的所有场景。若使用方式一nzIcon可直接指定标题前的图标类型。参数表参数说明类型默认值[nzPlacement]弹出菜单的位置bottomLeft \| bottomCenter \| bottomRight \| topLeft \| topCenter \| topRightbottomLeft[nzOpen]子菜单是否展开支持双向绑定booleanfalse[nzDisabled]是否禁用子菜单booleanfalse[nzTitle]子菜单标题string \| TemplateRefvoid-[nzIcon]标题中的图标类型string-[nzMenuClassName]自定义子菜单容器的 class 名称string-[nzTriggerSubMenuAction]触发子菜单展开/收起的行为hover \| clickhover(nzOpenChange)nzOpen变化回调EventEmitterboolean-内联模式与弹出模式的分流从 submenu.component.ts 的模板可以看到nz-submenu依据当前mode分流渲染inline模式使用nz-submenu-inline-child以内联方式渲染下级ul配合展开动画其他模式vertical / horizontal基于 Angular CDK 的cdkConnectedOverlay渲染弹出层弹出宽度在 horizontal 模式下会同步触发源宽度setTriggerWidth()保证弹出菜单与标题等宽。垂直模式下弹出层的位置候选集固定为右侧rightTop / right / rightBottom与左侧leftTop / left / leftBottom六种submenu.component.ts水平模式则使用底部/顶部的水平位置候选集nzPlacement用于指定首选位置CDK Overlay 会在空间不足时自动回退到候选位置。展开状态的管理150ms 防抖nzOpen的展开状态由NzSubmenuServicesubmenu.service.ts统一管理其核心逻辑是子菜单点击某个菜单项后自动收起非 inline 模式或位于 Dropdown 中时标题与弹出层区域的mouseenter / mouseleave状态与子级子菜单展开状态通过combineLatest合并再经auditTime(150)防抖避免鼠标在标题与弹出层之间快速移动时子菜单闪烁抖动打开状态会向上传播给父级NzSubmenuService因此嵌套多级子菜单可以整链展开。另外NzSubmenuService会对模式做一层推导inline保持不变垂直模式或处于其他子菜单内部的子菜单统一按vertical处理水平模式仅作用于顶级子菜单submenu.service.ts。嵌套层级与缩进NzSubmenuService通过skipSelf注入宿主NzSubmenuService来计算层级level嵌套子菜单level 1inline模式下padding-inline-start按level * inlineIndent递进多级结构天然缩进正确。[nz-menu-group]菜单分组[nz-menu-group]用于给一组菜单项加分组标题由NzMenuGroupComponent实现menu-group.component.ts。同样支持三种标题设置方式li nz-menu-group nzTitleSubTitle nzIconappstore/li li nz-menu-group span title nz-icon nzTypeappstore / spanSubTitle/span /span /li li nz-menu-group [nzTitle]titleTpl/li ng-template #titleTpl nz-icon nzTypeappstore / spanSubTitle/span /ng-template参数说明类型默认值[nzTitle]设置菜单分组标题string \| TemplateRefvoid-nzTitle通过nzStringTemplateOutlet统一支持字符串与模板两种输入menu-group.component.ts内部还会自动为紧随标题的ul添加ant-menu-item-group-list类。分组与嵌套子菜单的组合示例可参考 demo/theme.ts在nz-submenu内嵌套nz-menu-group每组再包含若干nz-menu-item。[nz-menu-divider]菜单分割线[nz-menu-divider]是一条作用于菜单项之间的分割线。需要特别注意的是官方文档明确说明它仅用于垂直弹出菜单或 Dropdown 菜单中即vertical弹出层与nz-dropdown内部不用于内联菜单。其实现极简仅为宿主元素附加ant-dropdown-menu-item-divider类menu-divider.directive.ts这也印证了它与 Dropdown 菜单样式的绑定关系li nz-menu-divider/li主题切换light 与 dark菜单主题通过nzTheme在light与dark之间切换对应 style/light.less 与 style/dark.less 两套样式入口。在实际应用中主题常与状态控件联动。仓库示例 demo/theme.ts 展示了用nz-switch动态切换明暗主题的写法nz-switch [(ngModel)]theme span checkedDark/span span uncheckedLight/span /nz-switch ul nz-menu nzModeinline [nzTheme]theme ? dark : light ... /ul主题变化通过MenuService.setTheme()广播menu.service.tsnz-submenu会订阅theme$同步更新弹出层的主题submenu.component.ts保证弹出子菜单与主菜单明暗一致。折叠模式inline-collapsed当菜单为inline模式并希望收缩成仅图标的窄条常用于 Sider 折叠时使用nzInlineCollapsed。仓库示例 demo/inline-collapsed.ts 展示了与nz-sider及开关按钮配合的典型场景。折叠背后的实现逻辑值得注意menu.directive.ts折叠前先记录当前所有已展开的子菜单nzOpen为真的子菜单再全部收起取消折叠时按记录恢复这些子菜单的展开状态。这保证了折叠-展开往返过程中用户此前打开的多级子菜单状态能够被完整还原。与 Layout 结合侧边导航菜单组件与 Layout 布局组件 的nz-sider是黄金搭档。仓库 demo/sider-current.ts 展示了“Sider 折叠 → 菜单同步折叠 → 路由联动高亮”的完整侧边导航方案配合nz-menu-item的nzMatchRouter可实现刷新后选中态与当前路由保持一致。模式切换实战nzMode支持在vertical、horizontal、inline三种模式间动态切换仓库示例 demo/switch-mode.ts 与 demo/horizontal.ts 分别演示了运行时切换模式与顶部水平导航。源码层面nzMode变化时会先把所有子菜单强制收起menu.directive.ts避免旧模式遗留的展开状态污染新模式布局。递归菜单与动态数据当菜单层级不确定时可采用组件递归渲染。仓库 demo/recursive.ts 给出了一份自递归组件的参考实现以nz-menu-item为叶子、nz-submenu为分支通过ng-template或递归组件消费菜单树数据适用于后端动态下发导航结构。源码架构速览理解菜单的底层结构有助于二次开发与问题排查menu.directive.ts根指令聚合模式/主题/折叠/缩进等全局状态负责选中态收敛与nzClick广播menu.service.ts菜单全局状态中心持有theme$、mode$、inlineIndent$、isChildSubMenuOpen$等 BehaviorSubject以及点击事件流descendantMenuItemClick$/childMenuItemClick$submenu.service.ts每个nz-submenu的局部状态服务管理自身展开状态、层级与模式推导并向上传播打开状态menu.token.ts两个内部 DI TokenNzIsMenuInsideDropdownToken标记菜单是否位于 Dropdown 内NzMenuServiceLocalToken供嵌套菜单获取本地服务实例menu-item.component.ts菜单项负责禁用、选中、危险样式与路由联动submenu.component.ts子菜单按模式分流内联展开与 CDK Overlay 弹出层。组件树通过依赖注入天然形成层级nz-submenu提供局部NzSubmenuService内部的nz-menu-item与嵌套nz-submenu通过skipSelf向上获取父级服务从而完成层级计算与打开状态沿链传播同时NzMenuDirective在提供者中通过MenuServiceFactory区分“根菜单服务”与“外部 Dropdown 注入的菜单服务”menu.directive.ts使nz-menu既能在页面中独立使用也能嵌入nz-dropdown菜单体系。总结ng-zorro-antd 的 Menu 组件围绕「根指令 服务层 层级注入」的架构提供了vertical/horizontal/inline三种模式、light/dark双主题、内联折叠、路由联动、弹出子菜单与递归渲染等完整能力。掌握本文的 API 表格与源码要点后你可以快速构建从简单顶栏到复杂侧边多级导航的各类场景遇到展开/收起异常或层级缩进问题时也能顺着MenuService与NzSubmenuService的调用链快速定位根因。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Affix固钉组件完全指南从 API 配置到源码级实现原理ng zorro antd Affix固钉组件完全指南从 API 配置到源码级实现原理 Affix固钉是 ng zorro antd 提供的页面固定组UI组件前端ng-zorro-antd响应式导航实现移动端菜单适配ng zorro antd响应式导航实现移动端菜单适配 你是否在开发Angular应用时遇到过导航菜单在移动端显示混乱的问题本文将详细介绍如何使用ng zoUI组件前端ng-zorro-antd Collapse 折叠面板组件完全指南从 API 配置到源码实现剖析ng zorro antd Collapse 折叠面板组件完全指南从 API 配置到源码实现剖析 导读 本文是 ng zorro antd 中 CollapsUI组件前端上一篇手机号码归属地定位工具3分钟实现快速免费地理位置查询下一篇XUnity.AutoTranslator完全指南让Unity游戏自动翻译成中文的终极方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考