企业官网建设流程全解析

• UI组件
• 前端

导读

Result（结果）是 ng-zorro-antd 中用于反馈一系列操作任务处理结果的反馈类组件，典型应用场景包括支付/提交成功页、提交失败详情页、以及 404/403/500 等异常访问页面。本文以 Result 官方中文文档 为骨架，结合仓库内组件源码、演示用例与测试用例，完整讲解其全部 API、子元素指令、异常状态插图机制以及主题样式原理，帮助你快速在 Angular 应用中落地规范、可维护的结果反馈页面。

何时使用

当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用 Result 组件。它与轻量的 message、notification 通知不同，适合承载：

• 操作完成后的独立结果页：如订单支付成功、表单提交成功，需要向用户清晰展示状态并给出下一步操作入口；
• 失败与纠错场景：如提交失败需要列出具体错误项并引导用户修改后重试；
• 系统级异常页面：404 页面不存在、403 无权限、500 服务器错误等路由兜底页。

一句话判断标准：反馈内容足够复杂（包含标题、副标题、详细说明、操作按钮多个层次）时，用 Result；仅需一闪而过的轻提示时，用 Message 或 Notification。

快速上手：模块导入与最小示例

Result 组件封装于独立的NzResultModule中，使用前先在你的模块或独立组件中导入：

import { NzResultModule } from 'ng-zorro-antd/result'; @Component({ standalone: true, imports: [NzResultModule], // ... }) export class MyComponent {}

最小示例只需设置标题即可渲染一个默认info状态的提示页：

<nz-result nzTitle="您的操作已执行" nzSubTitle="订单号：2017182818828182881" />

若希望更贴近真实业务，可参考官方演示 success.ts 在操作区域追加按钮：

<nz-result nzStatus="success" nzTitle="Successfully Purchased Cloud Server ECS!" nzSubTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait." > <div nz-result-extra> <button nz-button nzType="primary">Go Console</button> <button nz-button>Buy Again</button> </div> </nz-result>

核心 API：nz-result 属性详解

<nz-result>组件（选择器nz-result，导出名nzResult）共提供 5 个输入属性，官方文档表格如下：

nzStatus：状态如何决定图标与颜色

nzStatus是整个组件的行为核心，从 result.component.ts 可以清晰看到其类型设计与映射逻辑：

export type NzResultIconType = 'success' | 'error' | 'info' | 'warning'; export type NzExceptionStatusType = '404' | '500' | '403'; export type NzResultStatusType = NzExceptionStatusType | NzResultIconType; const IconMap: Record<NzResultIconType, string> = { success: 'check-circle', error: 'close-circle', info: 'exclamation-circle', warning: 'warning' }; const ExceptionStatus = ['404', '500', '403'];

可以看到，7 种状态被分为两类：

• 图标状态（success/error/info/warning）：顶部展示一个 Ant Design 图标，通过IconMap映射到具体图标名，图标以nzTheme="fill"实心主题渲染；
• 异常状态（404/500/403）：顶部展示一张预设的矢量插画（详见下文"异常状态插图"一节），此时nzIcon属性不生效。

组件的模板逻辑（result.component.ts）通过isException判断分支渲染：

readonly isException = computed(() => ExceptionStatus.indexOf(this.nzStatus()) !== -1);

非异常状态下，若用户未设置nzIcon，则取defaultIcon即IconMap[nzStatus]作为默认图标；异常状态下则用@switch分别渲染nz-result-not-found、nz-result-server-error、nz-result-unauthorized三个内部组件。

nzStatus未设置时默认为'info'（见 result.component.ts 中input<NzResultStatusType>('info')），因此上面"最小示例"实际渲染的是一个带感叹号图标的 info 结果页。

nzTitle / nzSubTitle / nzExtra：字符串与模板双模输入

这三个属性均支持string与TemplateRef<void>两种形态，得益于 ng-zorro-antd 核心的nzStringTemplateOutlet指令（来自ng-zorro-antd/core/outlet的NzOutletModule）。也就是说：

• 传字符串时直接展示文本；
• 传TemplateRef时渲染自定义模板内容，适合需要富文本、换行或嵌入其他组件的场景。

对应的源码实现（result.component.ts）：

readonly nzIcon = input<string | TemplateRef<void>>(); readonly nzTitle = input<string | TemplateRef<void>>(); readonly nzSubTitle = input<string | TemplateRef<void>>(); readonly nzExtra = input<string | TemplateRef<void>>();

模板中通过*nzStringTemplateOutlet统一渲染，例如标题部分：

@if (nzTitle()) { <div class="ant-result-title" *nzStringTemplateOutlet="nzTitle()"> {{ nzTitle() }} </div> }

nzIcon：自定义图标

nzIcon用于替换默认的状态图标，值同样是string | TemplateRef<void>。当传入字符串时，源码会先查IconMap，命中则替换为映射后的图标，未命中则原样作为图标名使用（result.component.ts）：

readonly icon = computed(() => { const icon = this.nzIcon(); return typeof icon === 'string' ? IconMap[icon as NzResultIconType] || icon : icon; });

官方演示 custom.ts 用笑脸图标自定义了一个"操作全部完成"的场景：

<nz-result nzIcon="smile-o" nzTitle="Great, we have done all the operators!"> <div nz-result-extra> <button nz-button nzType="primary">Next</button> </div> </nz-result>

异常状态插图：404 / 403 / 500

当nzStatus取'404' | '403' | '500'时，顶部图标区域会替换为仓库内三个 partial 组件渲染的内联 SVG 矢量插图，它们分别定义于：

• not-found.ts：404 页面不存在场景，nz-result-not-found组件，SVG 尺寸 252×294；
• server-error.component.ts：500 服务器错误场景，nz-result-server-error组件；
• unauthorized.ts：403 无权限场景，nz-result-unauthorized组件。

这三个组件是内部实现细节：虽然它们在 public-api.ts 中以ɵNzResultNotFoundComponent等私有别名导出以兼容 ng-packagr 打包，但注释明确说明"Making these partial components not visible to users"——它们不对外暴露，你无法也不需要在业务代码中单独使用，只需设置nzStatus即可自动切换插图。

官方演示中的异常页示例：

<!-- 404：页面不存在 --> <nz-result nzStatus="404" nzTitle="404" nzSubTitle="Sorry, the page you visited does not exist."> <div nz-result-extra> <button nz-button nzType="primary">Back Home</button> </div> </nz-result> <!-- 403：无权限访问 --> <nz-result nzStatus="403" nzTitle="403" nzSubTitle="Sorry, you are not authorized to access this page." /> <!-- 500：服务器错误 --> <nz-result nzStatus="500" nzTitle="500" nzSubTitle="Sorry, there is an error on server." />

对应演示代码可参考 fof.ts、fot.ts、foo.ts。将这类页面与 Angular Router 的**通配路由或守卫（Guard）结合，即可快速搭建应用级的 404/403 兜底页。

子元素指令：五种内容插槽

除属性方式外，你还可以在<nz-result>内部使用指令声明各区域内容。官方文档明确：它们的优先级低于上面的参数——即当nzTitle等属性有值时，属性渲染优先，对应子元素插槽将被忽略（这一优先级关系在 result.component.ts 的模板@if ... @else分支中得到印证）。

五种指令均定义于 result-cells.ts，与 HTML 语义区域一一对应：

除nz-result-icon外，其余四个指令均通过 host 绑定自动附加ant-result-title、ant-result-subtitle、ant-result-content、ant-result-extra样式类，保证样式与属性渲染路径完全一致。

nz-result-content是表格中未列出的隐藏第六区域，专门用于展示详细内容（如错误列表），这也是 Result 组件能承载"复杂反馈"的关键。官方演示 error.ts 展示了"提交失败"场景的完整用法：

<nz-result nzTitle="Submission Failed" nzStatus="error" nzSubTitle="Please check and modify the following information before resubmitting." > <div nz-result-content> <div class="desc"> <h4 nz-title>The content you submitted has the following error:</h4> <p nz-paragraph> <nz-icon nzType="close-circle" /> Your account has been frozen <a>Thaw immediately &gt;</a> </p> <p nz-paragraph> <nz-icon nzType="close-circle" /> Your account is not yet eligible to apply <a>Apply immediately &gt;</a> </p> </div> </div> <div nz-result-extra> <button nz-button nzType="primary">Go Console</button> <button nz-button>Buy Again</button> </div> </nz-result>

组件模板中对 content 区域的处理是直接透传ng-content select="nz-result-content, [nz-result-content]"，不附加额外包装节点，保证你写在里面的任意布局结构都能原样呈现。

布局结构与主题样式原理

Result 的渲染结构固定为五层：ant-result-icon→ant-result-title→ant-result-subtitle→ant-result-content（可选）→ant-result-extra，根节点在 result.component.ts 中通过 computed 动态生成：

readonly class = computed(() => { return { 'ant-result': true, [`ant-result-${this.nzStatus()}`]: true, 'ant-result-rtl': this.dir() === 'rtl' }; });

即根元素始终携带ant-result和ant-result-{status}两个类（如ant-result-success），并依据Directionality服务自动追加ant-result-rtl以支持 RTL 语言环境。同时组件使用ViewEncapsulation.None，样式类完全暴露，便于被主题系统与使用者自定义覆盖。

具体样式定义见 style/index.less，关键设计点：

• 整体留白：根容器padding: 48px 32px，保证结果页在屏幕中央视觉聚焦；
• 状态配色：四种图标状态的图标颜色分别取自主题变量——@success-color、@error-color、@info-color、@warning-color，与 Ant Design 语义色系统一，这意味着切换暗色/紧凑主题时结果页颜色会自动适配；
• 排版层级：标题使用@heading-color与@result-title-font-size，line-height: 1.8；副标题使用次级文本色@text-color-secondary与@result-subtitle-font-size，line-height: 1.6，二者均居中；
• 图标区：margin-bottom: 24px、水平居中，图标字号由主题变量@result-icon-font-size控制；异常插图固定 250×295 居中；
• 操作区：@result-extra-margin控制间距，内部相邻按钮之间以margin-inline-end: 8px分隔，天然适配 RTL；
• 内容区：margin-top: 24px、padding: 24px 40px，背景使用@background-color-light，让详细说明与主视觉形成层次对比。

这些字号、间距、边距均以 Less 变量形式存在于主题系统（可参考 customize-theme 文档），你可以通过主题变量覆盖实现品牌化定制。

实战组合：从状态到页面的完整方案

综合属性与子元素两种用法，可归纳出几类高频业务模板：

1. 成功/信息提示页（参考 success.ts）：nzStatus="success"+ 属性式标题副标题 + 子元素式操作按钮，用于支付完成、资料保存成功等场景。

2. 失败纠错页（参考 error.ts）：nzStatus="error"+nz-result-content列出具体错误项 +nz-result-extra提供"重试/返回修改"入口。

3. 纯图标自定义页（参考 custom.ts）：不设状态，仅用nzIcon="smile-o"等图标表达中性完成感。

4. 异常兜底页：nzStatus="404"等三个异常状态 + "Back Home" 按钮，接入路由兜底或权限守卫。

源码结构速查

Result 模块在仓库中位于 components/result，核心文件一览：

• result.component.ts：主组件，状态类型、图标映射、模板渲染、RTL 与主题类计算；
• result-cells.ts：五个子元素指令定义；
• result.module.ts：NzResultModule聚合导出主组件与指令（partial 组件仅内部使用，不对外导出）；
• partial/：404/403/500 内联 SVG 插图组件；
• style/index.less：组件样式与主题变量接入；
• demo/：8 组官方演示（success/error/info/warning/custom/fof/foo/fot）；
• result.spec.ts：测试用例，覆盖属性绑定、默认状态图标、异常状态切换等行为，是理解组件交互契约的权威参考。

最佳实践小结

• 复杂结果反馈优先选 Result，简单轻提示交给 message/notification；
• 静态文案直接用属性字符串即可；需要富文本、图标混排或动态结构时切换为TemplateRef或子元素指令；
• 记住"属性优先级高于子元素"的规则，避免同时设置造成困惑；
• 404/403/500 不要手动拼图标，直接使用nzStatus异常值，组件会自动渲染官方矢量插图，并保持与 Ant Design 视觉规范一致；
• 页面级结果页建议配合主题变量覆盖@result-*系列变量，以保持全站视觉统一。

• UI组件
• 前端