尧图网站建设 
UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读Rate评分是 ng-zorro-antd 中用于“对事物进行评分操作”的数据录入组件既能以只读方式展示评价结果也能让用户通过鼠标或键盘快速完成星级评级。本文以 Rate 官方中文文档 为主体完整展开其全部 API 与交互行为并结合 rate.component.ts 与 rate-item.component.ts 源码深入讲解半星、清除、键盘操作、自定义字符等能力的底层实现最后给出仓库内全部 7 个官方示例的完整落地写法帮助你从“会用”进阶到“懂原理”。一、何时使用 Rate根据官方文档Rate 组件适用于两类典型场景对评价进行展示例如商品详情页展示历史评分此时通常配合nzDisabled只读模式使用对事物进行快速的评级操作例如用户提交打分、问卷评分等交互场景配合表单的双向绑定使用。Rate 属于数据录入类组件与 Input、Select 一样支持ngModel双向绑定与响应式表单ControlValueAccessor。二、API 完整参考以下为官方文档中nz-rate组件的全部属性、事件与方法均已对照 rate.component.ts 源码核实默认值与类型。2.1 输入属性Properties属性说明类型默认值支持全局配置[nzAllowClear]是否允许再次点击后清除booleantrue✅[nzAllowHalf]是否允许半选booleanfalse✅[nzAutoFocus]自动获取焦点booleanfalse[nzCharacter]自定义字符TemplateRefvoidnz-icon nzTypestar /[nzCount]star 总数number5[nzDisabled]只读无法进行交互booleanfalse[nzTooltips]自定义每项的提示信息string[][][ngModel]当前数可以双向绑定number0几个值得注意的细节nzAllowClear与nzAllowHalf在源码中通过WithConfig()标记属于支持全局配置的属性可在NzConfigService中统一设置见 rate.component.ts组件构造函数中注册了onConfigChangeEventForComponent(rate, ...)当全局配置变化时会自动触发视图刷新rate.component.ts。nzCount使用numberAttribute转换、布尔属性使用booleanAttribute转换因此在模板中可以直接写nzCount10、nzAllowHalf这种简洁写法。nzCharacter的类型在源码中实际上是TemplateRef{ $implicit: number }即模板上下文会传入当前星标索引可据此实现“按索引定制字符”详见第五章。2.2 输出事件Events事件说明类型(ngModelChange)当前数改变时的回调EventEmitternumber(nzOnBlur)失去焦点时的回调EventEmitterFocusEvent(nzOnFocus)获取焦点时的回调EventEmitterFocusEvent(nzOnHoverChange)鼠标经过时数值变化的回调EventEmitternumber(nzOnKeyDown)按键回调EventEmitterKeyboardEvent源码中focus/blur事件通过fromEventOutsideAngular在 NgZone 之外监听仅在存在订阅者时才通过ngZone.run派发事件避免无谓的变更检测开销见 rate.component.ts。2.3 方法Methods名称描述blur()移除焦点focus()获取焦点对应源码实现为直接调用组件根元素ul.ant-rate的focus()与blur()rate.component.ts。若在模板中通过exportAs: nzRate获取组件实例nz-rate #ratenzRate /即可调用这两个方法。三、快速上手基础用法3.1 模块引入Rate 组件以独立模块发布在 Angular 独立组件模式下直接导入即可import { Component } from angular/core; import { FormsModule } from angular/forms; import { NzRateModule } from ng-zorro-antd/rate; Component({ selector: app-demo, imports: [FormsModule, NzRateModule], template: nz-rate [ngModel]2/nz-rate }) export class AppDemoComponent {}对应的官方示例见 demo/basic.ts这是 Rate 的最简用法一个 5 星、默认实心星、支持点击清除的评分条。3.2 双向绑定nz-rate实现了ControlValueAccessor见 rate.component.ts 的NG_VALUE_ACCESSOR提供者因此可以无缝接入 Angular 表单体系!-- 模板驱动表单 -- nz-rate [(ngModel)]score/nz-rate !-- 响应式表单 -- form [formGroup]form nz-rate formControlNamerating/nz-rate /formwriteValue方法负责外部值写入时刷新星标样式setDisabledState负责表单禁用状态与nzDisabled的合并rate.component.ts。四、交互行为与源码原理4.1 内部渲染结构组件的 DOM 结构分为两层见 rate.component.ts 模板ul.ant-rate └── li.ant-rate-star × N每颗星可挂 nz-tooltip └── div[nz-rate-item] ← 由 NzRateItemComponent 渲染而每个nz-rate-item内部又拆成两个半区见 rate-item.component.tsdiv.ant-rate-star-second右半星区域mouseover/click时上报isHalf falsediv.ant-rate-star-first左半星区域mouseover/click时上报isHalf true。hoverRate(isHalf)中做了isHalf this.allowHalf的收窄——只有开启nzAllowHalf时左半区才会被当作半星处理rate-item.component.ts。这从源码层面解释了“半星为何只在允许半选时生效”。4.2 半星Half starnz-rate nzAllowHalf [(ngModel)]score/nz-rate开启nzAllowHalf后点击左半区会得到index 0.5的取值。在onItemClick中实际值由isHalf ? index 0.5 : index 1计算得出rate.component.ts。星标样式的核心在updateStarStylerate.component.ts根据hoverValue与hasHalf为每颗星计算ant-rate-star-full / -half / -active / -zero / -focused五个状态类。这也是实现“鼠标划过即时预览评分”的关键onItemHover只更新内部hoverValue并刷新样式并不改动表单值只有真正点击时才写回ngModelrate.component.ts。4.3 清除Clear starnz-rate nzAllowClear [(ngModel)]score/nz-rate默认nzAllowClear true当再次点击与当前值相同的星级时评分被重置为 0见 rate.component.ts 中this.nzValue actualValue分支。若设置为false则重复点击不会清除只能通过改选其他星级来变更。4.4 键盘无障碍操作组件根元素带tabindex禁用时为-1支持键盘操作rate.component.ts按→RIGHT_ARROW分值加 1若开启nzAllowHalf则每次加 0.5按←LEFT_ARROW分值减 1若开启nzAllowHalf则每次减 0.5按键引起数值变化时触发(nzOnKeyDown)事件。配合nzAutoFocus设为true时在组件初始化后给根元素加上autofocus属性即可实现键盘即用、无需鼠标的评分体验。4.5 鼠标离开复位当鼠标移出整个组件mouseleave时onRateLeave会把预览值复位为当前实际值hasHalf根据当前值是否为小数重新计算hoverValue取Math.ceil(nzValue)并触发一次nzOnHoverChangerate.component.ts。这正是“划过时预览、离开后回弹”的视觉机制。五、自定义字符与文案5.1 替换默认星星为任意字符nzCharacter接收一个TemplateRef可将默认的nz-icon nzTypestar替换为字母、数字、字体图标甚至中文。官方示例 demo/character.ts 展示了三种替换!-- 爱心图标 -- ng-template #characterIconnz-icon nzTypeheart //ng-template !-- 中文单字 -- ng-template #characterZhLetter好/ng-template !-- 英文字母 -- ng-template #characterEnLetterA/ng-template nz-rate [ngModel]0 nzAllowHalf [nzCharacter]characterIcon / nz-rate [ngModel]0 nzAllowHalf [nzCharacter]characterZhLetter /在 rate-item.component.ts 中字符模板通过ngTemplateOutletContext注入{ $implicit: index }上下文即模板内可拿到当前星标的索引。5.2 按索引定制每个字符因为模板上下文携带索引可以做到“每一颗星各不相同”。官方示例 demo/customize.ts 用索引映射情绪图标ng-template #characterIcon let-index switch (index) { case (0) { nz-icon nzTypefrown / } case (1) { nz-icon nzTypefrown / } case (2) { nz-icon nzTypemeh / } case (3) { nz-icon nzTypesmile / } case (4) { nz-icon nzTypesmile / } } /ng-template nz-rate [ngModel]3 [nzCharacter]characterIcon /示例中还演示了通过::ng-deep .ant-rate-star { font-size: 36px; }放大字符尺寸的样式技巧。5.3 文案展现与 Tooltip通过nzTooltips传入与星级数量等长的文案数组鼠标悬停与选中时即可展示对应提示再配合(ngModelChange)或 signal 在组件旁输出当前文案。官方示例 demo/text.tsconst tooltips [terrible, bad, normal, good, wonderful];nz-rate [(ngModel)]value [nzTooltips]tooltips / if (value(); as rate) { span classant-rate-text{{ rate ? tooltips[rate - 1] : }}/span }底层实现中每颗li.ant-rate-star都挂载了nz-tooltip[nzTooltipTitle]绑定到nzTooltips[$index]见 rate.component.ts因此提示会逐星跟随鼠标出现。六、只读展示与全局配置6.1 只读模式nz-rate [ngModel]3 nzDisabled/nz-rate设置nzDisabled后根元素获得ant-rate-disabled样式类并呈现灰化视觉rate.component.tsonItemClick与onItemHover开头均直接return点击、悬停、键盘改动全部失效rate.component.tstabindex变为-1组件不可聚焦。这正适用于“对评价进行展示”的场景官方示例见 demo/disabled.md。6.2 全局配置nzAllowClear与nzAllowHalf支持全局配置。可在应用启动时通过provideNzConfig统一设置import { provideNzConfig } from ng-zorro-antd/core/config; export const appConfig: ApplicationConfig { providers: [ provideNzConfig({ rate: { nzAllowHalf: true, nzAllowClear: false } }) ] };组件内部通过WithConfig()装饰器读取全局配置作为默认值并在全局配置变化时自动重绘rate.component.ts 与 rate.component.ts。七、示例速查仓库 components/rate/demo 目录下共提供 7 个官方示例覆盖了本文涉及的全部能力可按需对照查阅示例文件核心知识点基本basic.md / basic.ts最简单的 5 星评分半星half.md / half.tsnzAllowHalf半选文案展现text.md / text.tsnzTooltips悬停提示只读disabled.md / disabled.tsnzDisabled展示型评分清除clear.md / clear.tsnzAllowClear允许/禁用清除其他字符character.md / character.tsnzCharacter替换字符自定义字符customize.md / customize.ts按索引定制每一颗星组件的模块导出与样式入口分别位于 public-api.ts、index.ts 与 style/index.less完整的行为测试用例可在 rate.spec.ts 中查看其中覆盖了点击评分、半星、清除、禁用、键盘操作等核心交互的断言是理解组件行为契约的最佳参考。结语Rate 组件的 API 看似简单但通过阅读 rate.component.ts 可以看清其设计巧思左右半区分离实现了半星、hoverValue与hasHalf双状态驱动样式预览、NgZone 外监听事件减少变更检测开销、ControlValueAccessor无缝接入表单。掌握了这些原理无论是定制字符、配置全局默认值还是排查交互异常都能游刃有余。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐5分钟掌握可视化搭建腾讯TMagic Editor完全指南5分钟掌握可视化搭建腾讯TMagic Editor完全指南 还在为复杂的页面开发而烦恼吗腾讯开源的TMagic Editor可视化搭建平台让你无需编写代码UI组件前端ng-zorro-antd Rate 组件半星评分nzAllowHalf完全指南实现原理与实战用法ng zorro antd Rate 组件半星评分nzAllowHalf完全指南实现原理与实战用法 导读 本指南聚焦 ng zorro antd基于 AUI组件前端ng-zorro-antd Pagination 分页组件完全指南API 详解、源码原理与全局配置实战ng zorro antd Pagination 分页组件完全指南API 详解、源码原理与全局配置实战 导读 本篇技术指南以 ng zorro antdAnUI组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 ng-zorro-antd Rate 评分组件完全指南：API 详解、源码原理与 7 大实战场景
UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读Rate评分是 ng-zorro-antd 中用于“对事物进行评分操作”的数据录入组件既能以只读方式展示评价结果也能让用户通过鼠标或键盘快速完成星级评级。本文以 Rate 官方中文文档 为主体完整展开其全部 API 与交互行为并结合 rate.component.ts 与 rate-item.component.ts 源码深入讲解半星、清除、键盘操作、自定义字符等能力的底层实现最后给出仓库内全部 7 个官方示例的完整落地写法帮助你从“会用”进阶到“懂原理”。一、何时使用 Rate根据官方文档Rate 组件适用于两类典型场景对评价进行展示例如商品详情页展示历史评分此时通常配合nzDisabled只读模式使用对事物进行快速的评级操作例如用户提交打分、问卷评分等交互场景配合表单的双向绑定使用。Rate 属于数据录入类组件与 Input、Select 一样支持ngModel双向绑定与响应式表单ControlValueAccessor。二、API 完整参考以下为官方文档中nz-rate组件的全部属性、事件与方法均已对照 rate.component.ts 源码核实默认值与类型。2.1 输入属性Properties属性说明类型默认值支持全局配置[nzAllowClear]是否允许再次点击后清除booleantrue✅[nzAllowHalf]是否允许半选booleanfalse✅[nzAutoFocus]自动获取焦点booleanfalse[nzCharacter]自定义字符TemplateRefvoidnz-icon nzTypestar /[nzCount]star 总数number5[nzDisabled]只读无法进行交互booleanfalse[nzTooltips]自定义每项的提示信息string[][][ngModel]当前数可以双向绑定number0几个值得注意的细节nzAllowClear与nzAllowHalf在源码中通过WithConfig()标记属于支持全局配置的属性可在NzConfigService中统一设置见 rate.component.ts组件构造函数中注册了onConfigChangeEventForComponent(rate, ...)当全局配置变化时会自动触发视图刷新rate.component.ts。nzCount使用numberAttribute转换、布尔属性使用booleanAttribute转换因此在模板中可以直接写nzCount10、nzAllowHalf这种简洁写法。nzCharacter的类型在源码中实际上是TemplateRef{ $implicit: number }即模板上下文会传入当前星标索引可据此实现“按索引定制字符”详见第五章。2.2 输出事件Events事件说明类型(ngModelChange)当前数改变时的回调EventEmitternumber(nzOnBlur)失去焦点时的回调EventEmitterFocusEvent(nzOnFocus)获取焦点时的回调EventEmitterFocusEvent(nzOnHoverChange)鼠标经过时数值变化的回调EventEmitternumber(nzOnKeyDown)按键回调EventEmitterKeyboardEvent源码中focus/blur事件通过fromEventOutsideAngular在 NgZone 之外监听仅在存在订阅者时才通过ngZone.run派发事件避免无谓的变更检测开销见 rate.component.ts。2.3 方法Methods名称描述blur()移除焦点focus()获取焦点对应源码实现为直接调用组件根元素ul.ant-rate的focus()与blur()rate.component.ts。若在模板中通过exportAs: nzRate获取组件实例nz-rate #ratenzRate /即可调用这两个方法。三、快速上手基础用法3.1 模块引入Rate 组件以独立模块发布在 Angular 独立组件模式下直接导入即可import { Component } from angular/core; import { FormsModule } from angular/forms; import { NzRateModule } from ng-zorro-antd/rate; Component({ selector: app-demo, imports: [FormsModule, NzRateModule], template: nz-rate [ngModel]2/nz-rate }) export class AppDemoComponent {}对应的官方示例见 demo/basic.ts这是 Rate 的最简用法一个 5 星、默认实心星、支持点击清除的评分条。3.2 双向绑定nz-rate实现了ControlValueAccessor见 rate.component.ts 的NG_VALUE_ACCESSOR提供者因此可以无缝接入 Angular 表单体系!-- 模板驱动表单 -- nz-rate [(ngModel)]score/nz-rate !-- 响应式表单 -- form [formGroup]form nz-rate formControlNamerating/nz-rate /formwriteValue方法负责外部值写入时刷新星标样式setDisabledState负责表单禁用状态与nzDisabled的合并rate.component.ts。四、交互行为与源码原理4.1 内部渲染结构组件的 DOM 结构分为两层见 rate.component.ts 模板ul.ant-rate └── li.ant-rate-star × N每颗星可挂 nz-tooltip └── div[nz-rate-item] ← 由 NzRateItemComponent 渲染而每个nz-rate-item内部又拆成两个半区见 rate-item.component.tsdiv.ant-rate-star-second右半星区域mouseover/click时上报isHalf falsediv.ant-rate-star-first左半星区域mouseover/click时上报isHalf true。hoverRate(isHalf)中做了isHalf this.allowHalf的收窄——只有开启nzAllowHalf时左半区才会被当作半星处理rate-item.component.ts。这从源码层面解释了“半星为何只在允许半选时生效”。4.2 半星Half starnz-rate nzAllowHalf [(ngModel)]score/nz-rate开启nzAllowHalf后点击左半区会得到index 0.5的取值。在onItemClick中实际值由isHalf ? index 0.5 : index 1计算得出rate.component.ts。星标样式的核心在updateStarStylerate.component.ts根据hoverValue与hasHalf为每颗星计算ant-rate-star-full / -half / -active / -zero / -focused五个状态类。这也是实现“鼠标划过即时预览评分”的关键onItemHover只更新内部hoverValue并刷新样式并不改动表单值只有真正点击时才写回ngModelrate.component.ts。4.3 清除Clear starnz-rate nzAllowClear [(ngModel)]score/nz-rate默认nzAllowClear true当再次点击与当前值相同的星级时评分被重置为 0见 rate.component.ts 中this.nzValue actualValue分支。若设置为false则重复点击不会清除只能通过改选其他星级来变更。4.4 键盘无障碍操作组件根元素带tabindex禁用时为-1支持键盘操作rate.component.ts按→RIGHT_ARROW分值加 1若开启nzAllowHalf则每次加 0.5按←LEFT_ARROW分值减 1若开启nzAllowHalf则每次减 0.5按键引起数值变化时触发(nzOnKeyDown)事件。配合nzAutoFocus设为true时在组件初始化后给根元素加上autofocus属性即可实现键盘即用、无需鼠标的评分体验。4.5 鼠标离开复位当鼠标移出整个组件mouseleave时onRateLeave会把预览值复位为当前实际值hasHalf根据当前值是否为小数重新计算hoverValue取Math.ceil(nzValue)并触发一次nzOnHoverChangerate.component.ts。这正是“划过时预览、离开后回弹”的视觉机制。五、自定义字符与文案5.1 替换默认星星为任意字符nzCharacter接收一个TemplateRef可将默认的nz-icon nzTypestar替换为字母、数字、字体图标甚至中文。官方示例 demo/character.ts 展示了三种替换!-- 爱心图标 -- ng-template #characterIconnz-icon nzTypeheart //ng-template !-- 中文单字 -- ng-template #characterZhLetter好/ng-template !-- 英文字母 -- ng-template #characterEnLetterA/ng-template nz-rate [ngModel]0 nzAllowHalf [nzCharacter]characterIcon / nz-rate [ngModel]0 nzAllowHalf [nzCharacter]characterZhLetter /在 rate-item.component.ts 中字符模板通过ngTemplateOutletContext注入{ $implicit: index }上下文即模板内可拿到当前星标的索引。5.2 按索引定制每个字符因为模板上下文携带索引可以做到“每一颗星各不相同”。官方示例 demo/customize.ts 用索引映射情绪图标ng-template #characterIcon let-index switch (index) { case (0) { nz-icon nzTypefrown / } case (1) { nz-icon nzTypefrown / } case (2) { nz-icon nzTypemeh / } case (3) { nz-icon nzTypesmile / } case (4) { nz-icon nzTypesmile / } } /ng-template nz-rate [ngModel]3 [nzCharacter]characterIcon /示例中还演示了通过::ng-deep .ant-rate-star { font-size: 36px; }放大字符尺寸的样式技巧。5.3 文案展现与 Tooltip通过nzTooltips传入与星级数量等长的文案数组鼠标悬停与选中时即可展示对应提示再配合(ngModelChange)或 signal 在组件旁输出当前文案。官方示例 demo/text.tsconst tooltips [terrible, bad, normal, good, wonderful];nz-rate [(ngModel)]value [nzTooltips]tooltips / if (value(); as rate) { span classant-rate-text{{ rate ? tooltips[rate - 1] : }}/span }底层实现中每颗li.ant-rate-star都挂载了nz-tooltip[nzTooltipTitle]绑定到nzTooltips[$index]见 rate.component.ts因此提示会逐星跟随鼠标出现。六、只读展示与全局配置6.1 只读模式nz-rate [ngModel]3 nzDisabled/nz-rate设置nzDisabled后根元素获得ant-rate-disabled样式类并呈现灰化视觉rate.component.tsonItemClick与onItemHover开头均直接return点击、悬停、键盘改动全部失效rate.component.tstabindex变为-1组件不可聚焦。这正适用于“对评价进行展示”的场景官方示例见 demo/disabled.md。6.2 全局配置nzAllowClear与nzAllowHalf支持全局配置。可在应用启动时通过provideNzConfig统一设置import { provideNzConfig } from ng-zorro-antd/core/config; export const appConfig: ApplicationConfig { providers: [ provideNzConfig({ rate: { nzAllowHalf: true, nzAllowClear: false } }) ] };组件内部通过WithConfig()装饰器读取全局配置作为默认值并在全局配置变化时自动重绘rate.component.ts 与 rate.component.ts。七、示例速查仓库 components/rate/demo 目录下共提供 7 个官方示例覆盖了本文涉及的全部能力可按需对照查阅示例文件核心知识点基本basic.md / basic.ts最简单的 5 星评分半星half.md / half.tsnzAllowHalf半选文案展现text.md / text.tsnzTooltips悬停提示只读disabled.md / disabled.tsnzDisabled展示型评分清除clear.md / clear.tsnzAllowClear允许/禁用清除其他字符character.md / character.tsnzCharacter替换字符自定义字符customize.md / customize.ts按索引定制每一颗星组件的模块导出与样式入口分别位于 public-api.ts、index.ts 与 style/index.less完整的行为测试用例可在 rate.spec.ts 中查看其中覆盖了点击评分、半星、清除、禁用、键盘操作等核心交互的断言是理解组件行为契约的最佳参考。结语Rate 组件的 API 看似简单但通过阅读 rate.component.ts 可以看清其设计巧思左右半区分离实现了半星、hoverValue与hasHalf双状态驱动样式预览、NgZone 外监听事件减少变更检测开销、ControlValueAccessor无缝接入表单。掌握了这些原理无论是定制字符、配置全局默认值还是排查交互异常都能游刃有余。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐5分钟掌握可视化搭建腾讯TMagic Editor完全指南5分钟掌握可视化搭建腾讯TMagic Editor完全指南 还在为复杂的页面开发而烦恼吗腾讯开源的TMagic Editor可视化搭建平台让你无需编写代码UI组件前端ng-zorro-antd Rate 组件半星评分nzAllowHalf完全指南实现原理与实战用法ng zorro antd Rate 组件半星评分nzAllowHalf完全指南实现原理与实战用法 导读 本指南聚焦 ng zorro antd基于 AUI组件前端ng-zorro-antd Pagination 分页组件完全指南API 详解、源码原理与全局配置实战ng zorro antd Pagination 分页组件完全指南API 详解、源码原理与全局配置实战 导读 本篇技术指南以 ng zorro antdAnUI组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考