UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载本篇指南基于 ng-zorro-antdAngular UI 组件库中 Result 组件官方文档 展开系统讲解nz-result的 7 种内置状态、5 个属性Input与 5 个内容指令Counter Parts的用法并结合仓库源码result.component.ts、result-cells.ts与官方示例深入剖析其渲染原理。阅读完本文你将能够独立搭建支付成功页、表单提交失败页、404/403/500 异常页以及带自定义图标的个性化结果页。一、何时使用 Result 组件按照官方文档的定位nz-result属于 Feedback反馈类组件用于反馈一系列操作任务的结果。使用场景通常是重要操作完成后需要告知用户处理结果且反馈信息较为复杂不只是弹一个提示而是需要展示标题、副标题、说明内容与操作按钮的完整页面表单提交、支付、注册、审核等流程的终态页面页面级错误状态展示如 404 页面未找到、403 无权限、500 服务器错误。它的默认外观样式位于 components/result/style/index.less与其他 ng-zorro-antd 组件一样支持主题变量定制。二、快速上手模块导入与第一个成功页使用前需要导入NzResultModule该模块在 result.module.ts 中定义并从 public-api.ts 对外导出。import { NgModule } from angular/core; import { NzResultModule } from ng-zorro-antd/result; NgModule({ imports: [NzResultModule] }) export class YourFeatureModule {}参照官方示例 success.ts一个最典型的下单成功页可以这样写import { Component } from angular/core; import { NzButtonModule } from ng-zorro-antd/button; import { NzResultModule } from ng-zorro-antd/result; Component({ selector: app-purchase-success, imports: [NzButtonModule, NzResultModule], template: nz-result nzStatussuccess nzTitleSuccessfully Purchased Cloud Server ECS! nzSubTitleOrder number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait. div nz-result-extra button nz-button nzTypeprimaryGo Console/button button nz-buttonBuy Again/button /div /nz-result }) export class AppPurchaseSuccessComponent {}注意这里nz-button需要额外导入NzButtonModule来自ng-zorro-antd/button。nz-result-extra是操作区指令里面可以放任意操作按钮。通过nzStatussuccess组件会自动渲染一个check-circle实心图标、绿色标题与整体成功态配色无需手动传图标。三、API 详解nz-result 的五个属性官方文档定义了nz-result的完整属性表如下PropertyDescriptionTypeDefaultnzTitletitleTemplateRefvoid \| string-nzSubTitlesubTitleTemplateRefvoid \| string-nzStatusresult status, decides icons and colorssuccess \| error \| info \| warning\| 404 \| 403 \| 500infonzIconcustom iconTemplateRefvoid \| string-nzExtraoperating areaTemplateRefvoid \| string-在源码 result.component.ts 中这五个属性全部以 Angular 现代 signal-based 的input()方式声明与官方文档一一对应readonly nzIcon inputstring | TemplateRefvoid(); readonly nzTitle inputstring | TemplateRefvoid(); readonly nzSubTitle inputstring | TemplateRefvoid(); readonly nzExtra inputstring | TemplateRefvoid(); readonly nzStatus inputNzResultStatusType(info);3.1 nzStatus七种状态与图标映射nzStatus决定整个结果页的图标与配色是组件的核心。其类型定义result.component.ts将状态划分为两组export type NzResultIconType success | error | info | warning; export type NzExceptionStatusType 404 | 500 | 403; export type NzResultStatusType NzExceptionStatusType | NzResultIconType;普通图标状态success、error、info、warning对应IconMapresult.component.ts中四个内置的 fill 主题图标const IconMap: RecordNzResultIconType, string { success: check-circle, error: close-circle, info: exclamation-circle, warning: warning };异常页面状态404、403、500对应三个内置的内联 SVG 插画组件源码位于 components/result/partial 目录404→ not-found.ts页面未找到插画含电脑与放大镜图形500→ server-error.component.ts服务器错误插画含服务器与500字样403→ unauthorized.ts无权限插画含锁形挂锁图形。当nzStatus落入这三种异常状态时组件通过ExceptionStatus数组与isException计算信号result.component.ts识别并使用switch渲染对应的插画组件否则渲染图标。这也是nzIcon、nzStatus取值的边界异常状态下会忽略自定义图标而强制展示插画。另外状态还会影响宿主根元素上的 CSS 类class计算信号result.component.ts会根据nzStatus追加ant-result-${status}类如ant-result-success、ant-result-error并支持ant-result-rtl用于 RTL 布局依赖angular/cdk/bidi的Directionality。3.2 nzTitle / nzSubTitle标题与副标题nzTitle、nzSubTitle既可以是纯字符串也可以是TemplateRefvoid模板引用。当传入模板时组件通过NzOutletModule提供的*nzStringTemplateOutlet指令渲染模板内容result.component.ts。组件优先渲染属性值只有属性未提供时才退化为通过ng-content投影的div[nz-result-title]/div[nz-result-subtitle]内容。官方测试 result.spec.ts 验证了这一属性优先、投影兜底的重叠逻辑props work and overlap contents。3.3 nzIcon自定义图标nzIcon提供两种自定义途径传入图标名字符串会先尝试匹配IconMap中四个语义关键字success/error/info/warning匹配不到则直接当作nz-icon的nzType使用。例如官方示例 custom.ts 中的nzIconsmile-o会渲染smile-o图标nz-result nzIconsmile-o nzTitleGreat, we have done all the operators! div nz-result-extra button nz-button nzTypeprimaryNext/button /div /nz-result传入TemplateRefvoid直接渲染自定义模板。从源码的icon计算信号result.component.ts可以看出该属性在渲染时始终以 fill 主题呈现nzThemefill以保证与内置状态图标视觉一致。3.4 nzExtra操作区域nzExtra对应结果页底部的操作区同样支持字符串与TemplateRefvoid。官方文档将其描述为operating area实践中通常放置返回首页重试去控制台等按钮是结果页与用户交互的入口。四、Counter Parts五个内容指令当不想用字符串/模板属性而是希望直接在组件标签内书写结构化内容时官方文档提供了以下 5 个指令作为nz-result的子元素使用DirectiveDescription[nz-result-icon]custom icondiv[nz-result-title]titlediv[nz-result-subtitle]subtitlediv[nz-result-content]contents, for detailed explanationsdiv[nz-result-extra]extra content, usually an operating area这些指令全部定义在 result-cells.ts 中各自的宿主类如下指令类选择器自动挂载的 CSS 类NzResultIconDirective[nz-result-icon]无仅作内容投影标记NzResultTitleDirectivediv[nz-result-title]ant-result-titleNzResultSubtitleDirectivediv[nz-result-subtitle]ant-result-subtitleNzResultContentDirectivediv[nz-result-content]ant-result-contentNzResultExtraDirectivediv[nz-result-extra]ant-result-extra其中nz-result-icon与nz-result-content在组件模板中通过ng-content的select选择器投影result.component.ts使子元素自动落入对应的语义化容器中其余四个指令则承担属性缺省时的兜底投影职责并自动获得对应 CSS 类以复用内置排版样式。配合指令写法的一个完整示例参考官方 success.ts 与测试组件 result.spec.tsnz-result nzStatussuccess nzTitleSubmission Succeeded nz-icon nz-result-icon nzTypeup nzThemeoutline / div nz-result-titleContent Title/div div nz-result-subtitleContent SubTitle/div div nz-result-contentDetailed explanation goes here/div div nz-result-extra button nz-button nzTypeprimaryGo Console/button /div /nz-result提示nz-result-icon的使用前提是nzStatus处于非异常状态否则异常插画优先渲染。该指令还常与NzIconModule的nz-icon搭配使用可自行指定nzTheme如outline。五、实战示例错误页与详细说明区div[nz-result-content]是错误反馈页最有价值的指令可用于展开出错原因的明细。参照官方 error.ts一个完整的表单提交失败页可以这样组织import { Component } from angular/core; import { NzButtonModule } from ng-zorro-antd/button; import { NzIconModule } from ng-zorro-antd/icon; import { NzResultModule } from ng-zorro-antd/result; import { NzTypographyModule } from ng-zorro-antd/typography; Component({ selector: nz-demo-result-error, imports: [NzButtonModule, NzIconModule, NzResultModule, NzTypographyModule], template: nz-result nzTitleSubmission Failed nzStatuserror nzSubTitlePlease check and modify the following information before resubmitting. div nz-result-content div classdesc h4 nz-titleThe content you submitted has the following error:/h4 p nz-paragraph nz-icon nzTypeclose-circle / Your account has been frozen aThaw immediately gt;/a /p p nz-paragraph nz-icon nzTypeclose-circle / Your account is not yet eligible to apply aApply immediately gt;/a /p /div /div div nz-result-extra button nz-button nzTypeprimaryGo Console/button button nz-buttonBuy Again/button /div /nz-result }) export class NzDemoResultErrorComponent {}上述代码中nz-title、nz-paragraph来自NzTypographyModule用于排版说明文字出错原因逐条列出并附带立即解冻立即申请等行内跳转链接构成一个信息完整、可操作的表单失败反馈页。这正是官方文档所说反馈信息比较复杂时的典型用法。六、异常状态页403 / 404 / 500实战当业务需要独立异常页时直接设置nzStatus为对应值即可无需额外引入任何插画资源——内置 SVG 已由NzResultNotFoundComponent、NzResultServerErrorComponent、NzResultUnauthorizedComponent三个内部组件提供并且从 public-api.ts 看这三个组件被包装为ɵ前缀的私有导出仅服务于 ng-packagr 打包不会污染用户 API 面。以 403 无权限页为例参考官方 fot.tsimport { Component } from angular/core; import { NzButtonModule } from ng-zorro-antd/button; import { NzResultModule } from ng-zorro-antd/result; Component({ selector: app-403-page, imports: [NzButtonModule, NzResultModule], template: nz-result nzStatus403 nzTitle403 nzSubTitleSorry, you are not authorized to access this page. div nz-result-extra button nz-button nzTypeprimaryBack Home/button /div /nz-result }) export class App403PageComponent {}同样地nzStatus404配合页面不存在文案、nzStatus500配合服务器错误文案即可快速产出其余两个异常页。官方 demo 目录components/result/demo中提供了fof404、fot403等对应示例可以直接对照。仓库还内置了info、warning状态的示例覆盖全部 7 种状态。七、源码实现原理从 Input 到最终渲染理解渲染链路有助于避免误用。以 result.component.ts 的模板为核心整个渲染流程可归纳如下状态分流isException()计算信号判断nzStatus是否为404/500/403。是 → 渲染对应插画子组件否 → 进入图标分支。图标优先级非异常状态下优先渲染nzIcon属性字符串经IconMap或直接作nzType模板则直接展开nzIcon未提供时退化为ng-content投影的[nz-result-icon]两者皆无才使用按nzStatus从IconMap查出的defaultIcon()。文本内容兜底nzTitle、nzSubTitle属性存在时渲染属性内容支持字符串模板展开否则投影div[nz-result-title]、div[nz-result-subtitle]。明细与操作区nz-result-content无条件投影nzExtra属性优先、div[nz-result-extra]兜底。官方测试 result.spec.ts 对上述行为做了完整断言宿主元素必须携带ant-result与ant-result-error类属性提供的icon会覆盖状态默认图标测试中nzIcon传入success时渲染anticon-check-circle标题、副标题、额外内容均按预期输出。若你在业务中同时使用了属性与指令可依据该优先级规则预期最终表现。八、小结与更多参考nz-result是 ng-zorro-antd 中构建流程终态页面的标准答案四个普通状态 三个异常状态一键切换五个属性与五个指令互相配合覆盖标题 副标题 图标 明细 操作区的完整结果页结构。建议按以下顺序查阅仓库资料继续深入官方英文文档components/result/doc/index.en-US.md组件实现result.component.ts、result-cells.ts内置插画partial/not-found.ts、partial/server-error.component.ts、partial/unauthorized.ts可运行示例components/result/demo 下的success.ts、error.ts、info.ts、warning.ts、fof.ts、fot.ts、custom.ts测试用例result.spec.ts样式源码components/result/style/index.less。结合本篇的 API 说明与源码解析你可以直接照抄示例代码到自己的 Angular 应用中快速落地一套风格统一、语义明确的结果反馈页。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐Archon 在 WSL 下运行 agent-browser 端到端测试Windows 开发环境实战指南Archon 在 WSL 下运行 agent browser 端到端测试Windows 开发环境实战指南 导读 在 Windows 上为 Archon 配置端UI组件前端ng-zorro-antd Result 组件 Info 状态实战用 nz-result 优雅展示操作处理结果ng zorro antd Result 组件 Info 状态实战用 nz result 优雅展示操作处理结果 导读 在管理后台与中后台业务系统中操作已执UI组件前端ng-zorro-antd Result 组件实战用 nzStatussuccess 快速构建成功结果页ng zorro antd Result 组件实战用 nzStatussuccess 快速构建成功结果页 在 Angular 应用中支付完成、订单提交UI组件前端上一篇Laravel权限管理终极指南Spatie Permission完全解析下一篇Android设备畅玩Minecraft Java版终极指南MCinaBox深度解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考