企业官网建设流程全解析

• UI组件
• 前端

本指南聚焦 ng-zorro-antd 的 Menu 组件中的inline（内嵌）模式：子菜单直接内嵌在菜单区域内展开，形成垂直多级导航结构，是侧边栏导航最常见的形态。读完本文你将掌握nzMode="inline"的完整写法、缩进与展开控制参数，并理解其底层渲染与动画实现原理。

Inline 内嵌菜单是什么

在原文档（components/menu/demo/inline.md）中，对这种模式的定义非常精炼：

• 中文：垂直菜单，子菜单内嵌在菜单区域。
• 英文：Vertical menu with inline submenus.

也就是说，inline模式与vertical、horizontal并列，是nz-menu的三种模式之一，其核心特征是：子菜单不是弹出式（popup）浮层，而是就地内嵌在父菜单的垂直流中，展开时占据菜单自身的区域、把后续菜单项向下推移。这种结构非常适合侧边栏导航，能清晰收纳多级页面架构。

完整示例：三层内嵌菜单

官方演示位于 components/menu/demo/inline.ts，一个组件即可跑通全部能力，完整代码如下：

import { Component } from '@angular/core'; import { NzMenuModule } from 'ng-zorro-antd/menu'; @Component({ selector: 'nz-demo-menu-inline', imports: [NzMenuModule], template: ` <ul nz-menu nzMode="inline"> <li nz-submenu nzTitle="Navigation One" nzIcon="mail" nzOpen> <ul> <li nz-menu-group nzTitle="Item 1"> <ul> <li nz-menu-item nzSelected>Option 1</li> <li nz-menu-item>Option 2</li> </ul> </li> <li nz-menu-group nzTitle="Item 2"> <ul> <li nz-menu-item>Option 3</li> <li nz-menu-item>Option 4</li> </ul> </li> </ul> </li> <li nz-submenu nzTitle="Navigation Two" nzIcon="appstore"> <ul> <li nz-menu-item>Option 5</li> <li nz-menu-item>Option 6</li> <li nz-submenu nzTitle="Submenu"> <ul> <li nz-menu-item>Option 7</li> <li nz-menu-item>Option 8</li> <li nz-submenu nzTitle="Submenu"> <ul> <li nz-menu-item>Option 9</li> <li nz-menu-item>Option 10</li> </ul> </li> </ul> </li> </ul> </li> <li nz-submenu nzTitle="Navigation Three" nzIcon="setting"> <ul> <li nz-menu-item>Option 11</li> <li nz-menu-item>Option 12</li> <li nz-menu-item>Option 13</li> </ul> </li> </ul> `, styles: ` [nz-menu] { width: 240px; } ` }) export class NzDemoMenuInlineComponent {}

将该组件放入模块的imports（或声明到任意组件的imports: [NzMenuModule]）即可渲染。逐层解读这段模板：

1. 根菜单：<ul nz-menu nzMode="inline">声明内嵌模式；通过样式约束容器宽度（如240px）。
2. 一级子菜单：<li nz-submenu nzTitle="Navigation One" nzIcon="mail" nzOpen>，其中nzOpen表示默认展开，"Navigation One" 首次进入页面即为展开状态。
3. 菜单分组：<li nz-menu-group nzTitle="Item 1">给同级菜单项加组标题，让列表更有条理。
4. 菜单项：<li nz-menu-item nzSelected>Option 1</li>，nzSelected标记默认选中项；未加该属性的项（Option 2、3、4…）在点击后才会被选中。
5. 嵌套层级：Navigation Two 内部还嵌了一层nz-submenu，而该子菜单内部又嵌一层nz-submenu，可见inline 模式支持任意层级递归嵌套——这正是文档里“子菜单内嵌在菜单区域”的直观体现。

关键 API 与参数详解

以 components/menu/doc/index.zh-CN.md（英文版见 components/menu/doc/index.en-US.md）为基准，与内嵌模式强相关的 API 如下。

nz-menu（根指令）常用参数

类型定义见 components/menu/menu.types.ts：NzMenuModeType = 'vertical' | 'horizontal' | 'inline'，NzMenuThemeType = 'light' | 'dark'，NzSubmenuTrigger = 'hover' | 'click'。

nz-submenu（子菜单）常用参数

nzTitle有三种写法：直接字符串 +nzIcon；<span title>投影自定义内容；或[nzTitle]="titleTpl"传入ng-template。文档原文还特别说明nzPlacement主要作用于弹出式子菜单，inline 模式下子菜单就地展开，不涉及浮层定位。

nz-menu-item 与 nz-menu-group

菜单项nz-menu-item支持nzDisabled（禁用）、nzSelected（选中）、nzDanger（错误状态样式），以及路由相关的nzMatchRouter/nzMatchRouterExact（按routerLink自动设置选中态）。菜单分组nz-menu-group仅一个nzTitle参数，类型同样为string \| TemplateRef<void>。此外还有nz-menu-divider菜单分割线，通常用于弹出菜单内。

源码级原理解析：inline 模式是如何渲染的

1. 模式驱动的 class 与 actualMode 计算

[nz-menu] 指令（components/menu/menu.directive.ts）通过宿主绑定为根元素挂上ant-menu与ant-menu-inline等类名：

'[class.ant-menu-inline]': `!isMenuInsideDropdown && actualMode === 'inline'`

actualMode由inlineCollapsed$与mode$两个流combineLatest计算得出（menu.directive.ts）：

this.actualMode = inlineCollapsed ? 'vertical' : mode;

也就是说，当nzInlineCollapsed为true时，内嵌菜单会临时切换为vertical模式（子菜单变为弹出浮层），这正是收起态的实现基础；随后该模式会通过MenuService.setMode()广播给所有子菜单。

2. 子菜单的 inline 分支渲染

NzSubMenuComponent 的模板用@if (mode === 'inline')分叉：

• inline 模式：渲染<div nz-submenu-inline-child>，子菜单内容（ng-content投影的<ul>）就地插入，配合NzAnimationCollapseDirective（见 components/menu/submenu-inline-child.component.ts）实现高度折叠动画，收起/展开时不会出现弹出浮层；
• vertical / horizontal 模式：走cdkConnectedOverlay弹出层路线，才有nzPlacement、左右弹出位置等概念。

3. 层级缩进如何计算

内嵌菜单的视觉层级感来自逐级缩进。子菜单组件在 submenu.component.ts 中监听mode$与inlineIndent$：

this.inlinePaddingLeft = mode === 'inline' ? this.level * inlineIndent : null;

其中level来自NzSubmenuService的层级计数，inlineIndent默认值24定义在 menu.directive.ts，并通过 MenuService 的inlineIndent$流下发。因此每嵌套一级，子菜单标题与内容自动左移 24px，你可以用[nzInlineIndent]全局调整这一步长，或通过nzPaddingLeft对单个子菜单单独覆盖。

4. 状态广播：MenuService 的中枢作用

整个菜单树的状态同步依赖 components/menu/menu.service.ts 中的一组BehaviorSubject：theme$、mode$、inlineIndent$自上而下广播主题、模式与缩进；descendantMenuItemClick$收集任意层级的菜单项点击，最终在指令层触发nzClick输出，并在nzSelectable为true时更新选中态（menu.directive.ts）。这也是为什么 inline 菜单中深层嵌套的菜单项点击后，父级nz-submenu也能正确高亮选中态。

延伸：内嵌菜单收起（inline-collapsed）

配合[nzInlineCollapsed]，inline 菜单可以切换为只显示图标的窄条状态，这是侧边栏“收起/展开”交互的标准做法。参考 components/menu/demo/inline-collapsed.ts：

readonly isCollapsed = signal(false); toggleCollapsed(): void { this.isCollapsed.update(isCollapsed => !isCollapsed); }

模板中通过按钮切换状态，并挂到根菜单上：

<ul nz-menu nzMode="inline" nzTheme="dark" [nzInlineCollapsed]="isCollapsed()"> <li nz-menu-item nz-tooltip nzTooltipPlacement="right" [nzTooltipTitle]="isCollapsed() ? 'Navigation One' : ''" nzSelected> <nz-icon nzType="mail" /> <span>Navigation One</span> </li> ... </ul>

要点：

• 收起时actualMode自动变为vertical，子菜单改为浮层弹出；
• 之前展开的子菜单在收起时会被记录并临时关闭，展开时再恢复（见 menu.directive.ts 的updateInlineCollapse()）；
• 收起后文字隐藏，通常需要配合nz-tooltip在右侧弹出完整标题，如上例所示；
• nzInlineCollapsed与nzMode仅在inline模式下有意义。

总结

• 结构：<ul nz-menu nzMode="inline">+nz-submenu/nz-menu-group/nz-menu-item递归嵌套，即得到子菜单内嵌的垂直导航菜单；
• 控制：nzOpen控制默认展开，nzInlineIndent（默认24）控制逐级缩进，nzInlineCollapsed支持侧边栏收起；
• 原理：inline 模式在渲染层走内嵌容器 + 折叠动画，收起时切换为 vertical 浮层模式，状态统一由MenuService广播同步。

如需查看更多用法（水平菜单、路由联动、主题切换、递归生成菜单等），可继续查阅 components/menu/demo 目录下的其他演示，如 router.ts、theme.ts、recursive.ts；完整参数说明见 components/menu/doc/index.zh-CN.md。

• UI组件
• 前端