尧图网站建设 
UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读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 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核心 APInz-result 属性详解nz-result组件选择器nz-result导出名nzResult共提供 5 个输入属性官方文档表格如下属性说明类型默认值nzTitle标题TemplateRefvoid \| string-nzSubTitle副标题TemplateRefvoid \| string-nzStatus结果的状态决定图标和颜色success \| error \| info \| warning \| 404 \| 403 \| 500infonzIcon自定义 iconTemplateRefvoid \| string-nzExtra操作区域TemplateRefvoid \| string-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: RecordNzResultIconType, 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映射到具体图标名图标以nzThemefill实心主题渲染异常状态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 中inputNzResultStatusType(info)因此上面最小示例实际渲染的是一个带感叹号图标的 info 结果页。nzTitle / nzSubTitle / nzExtra字符串与模板双模输入这三个属性均支持string与TemplateRefvoid两种形态得益于 ng-zorro-antd 核心的nzStringTemplateOutlet指令来自ng-zorro-antd/core/outlet的NzOutletModule。也就是说传字符串时直接展示文本传TemplateRef时渲染自定义模板内容适合需要富文本、换行或嵌入其他组件的场景。对应的源码实现result.component.tsreadonly nzIcon inputstring | TemplateRefvoid(); readonly nzTitle inputstring | TemplateRefvoid(); readonly nzSubTitle inputstring | TemplateRefvoid(); readonly nzExtra inputstring | TemplateRefvoid();模板中通过*nzStringTemplateOutlet统一渲染例如标题部分if (nzTitle()) { div classant-result-title *nzStringTemplateOutletnzTitle() {{ nzTitle() }} /div }nzIcon自定义图标nzIcon用于替换默认的状态图标值同样是string | TemplateRefvoid。当传入字符串时源码会先查IconMap命中则替换为映射后的图标未命中则原样作为图标名使用result.component.tsreadonly icon computed(() { const icon this.nzIcon(); return typeof icon string ? IconMap[icon as NzResultIconType] || icon : icon; });官方演示 custom.ts 用笑脸图标自定义了一个操作全部完成的场景nz-result nzIconsmile-o nzTitleGreat, we have done all the operators! div nz-result-extra button nz-button nzTypeprimaryNext/button /div /nz-result异常状态插图404 / 403 / 500当nzStatus取404 | 403 | 500时顶部图标区域会替换为仓库内三个 partial 组件渲染的内联 SVG 矢量插图它们分别定义于not-found.ts404 页面不存在场景nz-result-not-found组件SVG 尺寸 252×294server-error.component.ts500 服务器错误场景nz-result-server-error组件unauthorized.ts403 无权限场景nz-result-unauthorized组件。这三个组件是内部实现细节虽然它们在 public-api.ts 中以ɵNzResultNotFoundComponent等私有别名导出以兼容 ng-packagr 打包但注释明确说明Making these partial components not visible to users——它们不对外暴露你无法也不需要在业务代码中单独使用只需设置nzStatus即可自动切换插图。官方演示中的异常页示例!-- 404页面不存在 -- nz-result nzStatus404 nzTitle404 nzSubTitleSorry, the page you visited does not exist. div nz-result-extra button nz-button nzTypeprimaryBack Home/button /div /nz-result !-- 403无权限访问 -- nz-result nzStatus403 nzTitle403 nzSubTitleSorry, you are not authorized to access this page. / !-- 500服务器错误 -- nz-result nzStatus500 nzTitle500 nzSubTitleSorry, 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 语义区域一一对应元素说明对应指令类selector[nz-result-icon]在顶部展示的大图标NzResultIconDirective[nz-result-icon]div[nz-result-title]标题NzResultTitleDirectivediv[nz-result-title]div[nz-result-subtitle]副标题NzResultSubtitleDirectivediv[nz-result-subtitle]div[nz-result-content]内容可以展示详细的信息NzResultContentDirectivediv[nz-result-content]div[nz-result-extra]操作区域NzResultExtraDirectivediv[nz-result-extra]除nz-result-icon外其余四个指令均通过 host 绑定自动附加ant-result-title、ant-result-subtitle、ant-result-content、ant-result-extra样式类保证样式与属性渲染路径完全一致。nz-result-content是表格中未列出的隐藏第六区域专门用于展示详细内容如错误列表这也是 Result 组件能承载复杂反馈的关键。官方演示 error.ts 展示了提交失败场景的完整用法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组件模板中对 content 区域的处理是直接透传ng-content selectnz-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-sizeline-height: 1.8副标题使用次级文本色text-color-secondary与result-subtitle-font-sizeline-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.tsnzStatussuccess 属性式标题副标题 子元素式操作按钮用于支付完成、资料保存成功等场景。2. 失败纠错页参考 error.tsnzStatuserrornz-result-content列出具体错误项 nz-result-extra提供重试/返回修改入口。3. 纯图标自定义页参考 custom.ts不设状态仅用nzIconsmile-o等图标表达中性完成感。4. 异常兜底页nzStatus404等三个异常状态 Back Home 按钮接入路由兜底或权限守卫。源码结构速查Result 模块在仓库中位于 components/result核心文件一览result.component.ts主组件状态类型、图标映射、模板渲染、RTL 与主题类计算result-cells.ts五个子元素指令定义result.module.tsNzResultModule聚合导出主组件与指令partial 组件仅内部使用不对外导出partial/404/403/500 内联 SVG 插图组件style/index.less组件样式与主题变量接入demo/8 组官方演示success/error/info/warning/custom/fof/foo/fotresult.spec.ts测试用例覆盖属性绑定、默认状态图标、异常状态切换等行为是理解组件交互契约的权威参考。最佳实践小结复杂结果反馈优先选 Result简单轻提示交给 message/notification静态文案直接用属性字符串即可需要富文本、图标混排或动态结构时切换为TemplateRef或子元素指令记住属性优先级高于子元素的规则避免同时设置造成困惑404/403/500 不要手动拼图标直接使用nzStatus异常值组件会自动渲染官方矢量插图并保持与 Ant Design 视觉规范一致页面级结果页建议配合主题变量覆盖result-*系列变量以保持全站视觉统一。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Result 组件 Info 状态实战用 nz-result 优雅展示操作处理结果ng zorro antd Result 组件 Info 状态实战用 nz result 优雅展示操作处理结果 导读 在管理后台与中后台业务系统中操作已执UI组件前端ng-zorro-antd Empty 空状态组件完全指南内置占位图、自定义内容与全局配置ng zorro antd Empty 空状态组件完全指南内置占位图、自定义内容与全局配置 当页面或数据区域没有内容可展示时空状态Empty StateUI组件前端ng-zorro-antd Empty 空状态组件完全指南内置占位图、自定义内容与全局空组件配置ng zorro antd Empty 空状态组件完全指南内置占位图、自定义内容与全局空组件配置 导读 Empty空状态是 ng zorro antd 中UI组件前端上一篇Lighthouse ROM哈希校验机制SHA-1校验和验证详解下一篇Arrow颠覆传统叙事设计工具的革命性解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 ng-zorro-antd Result 结果组件完全指南：状态图标、异常插图与自定义布局实战
UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读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 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核心 APInz-result 属性详解nz-result组件选择器nz-result导出名nzResult共提供 5 个输入属性官方文档表格如下属性说明类型默认值nzTitle标题TemplateRefvoid \| string-nzSubTitle副标题TemplateRefvoid \| string-nzStatus结果的状态决定图标和颜色success \| error \| info \| warning \| 404 \| 403 \| 500infonzIcon自定义 iconTemplateRefvoid \| string-nzExtra操作区域TemplateRefvoid \| string-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: RecordNzResultIconType, 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映射到具体图标名图标以nzThemefill实心主题渲染异常状态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 中inputNzResultStatusType(info)因此上面最小示例实际渲染的是一个带感叹号图标的 info 结果页。nzTitle / nzSubTitle / nzExtra字符串与模板双模输入这三个属性均支持string与TemplateRefvoid两种形态得益于 ng-zorro-antd 核心的nzStringTemplateOutlet指令来自ng-zorro-antd/core/outlet的NzOutletModule。也就是说传字符串时直接展示文本传TemplateRef时渲染自定义模板内容适合需要富文本、换行或嵌入其他组件的场景。对应的源码实现result.component.tsreadonly nzIcon inputstring | TemplateRefvoid(); readonly nzTitle inputstring | TemplateRefvoid(); readonly nzSubTitle inputstring | TemplateRefvoid(); readonly nzExtra inputstring | TemplateRefvoid();模板中通过*nzStringTemplateOutlet统一渲染例如标题部分if (nzTitle()) { div classant-result-title *nzStringTemplateOutletnzTitle() {{ nzTitle() }} /div }nzIcon自定义图标nzIcon用于替换默认的状态图标值同样是string | TemplateRefvoid。当传入字符串时源码会先查IconMap命中则替换为映射后的图标未命中则原样作为图标名使用result.component.tsreadonly icon computed(() { const icon this.nzIcon(); return typeof icon string ? IconMap[icon as NzResultIconType] || icon : icon; });官方演示 custom.ts 用笑脸图标自定义了一个操作全部完成的场景nz-result nzIconsmile-o nzTitleGreat, we have done all the operators! div nz-result-extra button nz-button nzTypeprimaryNext/button /div /nz-result异常状态插图404 / 403 / 500当nzStatus取404 | 403 | 500时顶部图标区域会替换为仓库内三个 partial 组件渲染的内联 SVG 矢量插图它们分别定义于not-found.ts404 页面不存在场景nz-result-not-found组件SVG 尺寸 252×294server-error.component.ts500 服务器错误场景nz-result-server-error组件unauthorized.ts403 无权限场景nz-result-unauthorized组件。这三个组件是内部实现细节虽然它们在 public-api.ts 中以ɵNzResultNotFoundComponent等私有别名导出以兼容 ng-packagr 打包但注释明确说明Making these partial components not visible to users——它们不对外暴露你无法也不需要在业务代码中单独使用只需设置nzStatus即可自动切换插图。官方演示中的异常页示例!-- 404页面不存在 -- nz-result nzStatus404 nzTitle404 nzSubTitleSorry, the page you visited does not exist. div nz-result-extra button nz-button nzTypeprimaryBack Home/button /div /nz-result !-- 403无权限访问 -- nz-result nzStatus403 nzTitle403 nzSubTitleSorry, you are not authorized to access this page. / !-- 500服务器错误 -- nz-result nzStatus500 nzTitle500 nzSubTitleSorry, 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 语义区域一一对应元素说明对应指令类selector[nz-result-icon]在顶部展示的大图标NzResultIconDirective[nz-result-icon]div[nz-result-title]标题NzResultTitleDirectivediv[nz-result-title]div[nz-result-subtitle]副标题NzResultSubtitleDirectivediv[nz-result-subtitle]div[nz-result-content]内容可以展示详细的信息NzResultContentDirectivediv[nz-result-content]div[nz-result-extra]操作区域NzResultExtraDirectivediv[nz-result-extra]除nz-result-icon外其余四个指令均通过 host 绑定自动附加ant-result-title、ant-result-subtitle、ant-result-content、ant-result-extra样式类保证样式与属性渲染路径完全一致。nz-result-content是表格中未列出的隐藏第六区域专门用于展示详细内容如错误列表这也是 Result 组件能承载复杂反馈的关键。官方演示 error.ts 展示了提交失败场景的完整用法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组件模板中对 content 区域的处理是直接透传ng-content selectnz-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-sizeline-height: 1.8副标题使用次级文本色text-color-secondary与result-subtitle-font-sizeline-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.tsnzStatussuccess 属性式标题副标题 子元素式操作按钮用于支付完成、资料保存成功等场景。2. 失败纠错页参考 error.tsnzStatuserrornz-result-content列出具体错误项 nz-result-extra提供重试/返回修改入口。3. 纯图标自定义页参考 custom.ts不设状态仅用nzIconsmile-o等图标表达中性完成感。4. 异常兜底页nzStatus404等三个异常状态 Back Home 按钮接入路由兜底或权限守卫。源码结构速查Result 模块在仓库中位于 components/result核心文件一览result.component.ts主组件状态类型、图标映射、模板渲染、RTL 与主题类计算result-cells.ts五个子元素指令定义result.module.tsNzResultModule聚合导出主组件与指令partial 组件仅内部使用不对外导出partial/404/403/500 内联 SVG 插图组件style/index.less组件样式与主题变量接入demo/8 组官方演示success/error/info/warning/custom/fof/foo/fotresult.spec.ts测试用例覆盖属性绑定、默认状态图标、异常状态切换等行为是理解组件交互契约的权威参考。最佳实践小结复杂结果反馈优先选 Result简单轻提示交给 message/notification静态文案直接用属性字符串即可需要富文本、图标混排或动态结构时切换为TemplateRef或子元素指令记住属性优先级高于子元素的规则避免同时设置造成困惑404/403/500 不要手动拼图标直接使用nzStatus异常值组件会自动渲染官方矢量插图并保持与 Ant Design 视觉规范一致页面级结果页建议配合主题变量覆盖result-*系列变量以保持全站视觉统一。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Result 组件 Info 状态实战用 nz-result 优雅展示操作处理结果ng zorro antd Result 组件 Info 状态实战用 nz result 优雅展示操作处理结果 导读 在管理后台与中后台业务系统中操作已执UI组件前端ng-zorro-antd Empty 空状态组件完全指南内置占位图、自定义内容与全局配置ng zorro antd Empty 空状态组件完全指南内置占位图、自定义内容与全局配置 当页面或数据区域没有内容可展示时空状态Empty StateUI组件前端ng-zorro-antd Empty 空状态组件完全指南内置占位图、自定义内容与全局空组件配置ng zorro antd Empty 空状态组件完全指南内置占位图、自定义内容与全局空组件配置 导读 Empty空状态是 ng zorro antd 中UI组件前端上一篇Lighthouse ROM哈希校验机制SHA-1校验和验证详解下一篇Arrow颠覆传统叙事设计工具的革命性解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考