UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载本指南围绕 ng-zorro-antdAngular UI 组件库中的 Rate 评分组件展开系统讲解其全部输入/输出属性、组件方法与全局配置能力并结合 rate.component.ts 源码与 rate 组件演示用例 剖析评分交互、半星机制、键盘操作与双向绑定的底层实现。读完本文你将掌握 Rate 组件的完整配置方式并能基于nzCharacter模板与表单集成实现自定义的评分场景。何时使用 Rate 组件Rate 组件用于对某事物进行评分操作在 ng-zorro-antd 中对应的选择器为nz-rate官方使用场景界定如下展示评价以星级形式直观呈现他人或系统对某对象商品、内容、服务等的评价结果快速评分操作让用户通过点击或键盘快速完成一次打分例如满意度调查、内容质量评分等。从源码结构看Rate 组件由两个文件构成rate.component.ts对外主组件负责状态管理与事件分发和 rate-item.component.ts内部单颗星星渲染单元负责半星与悬停反馈。模块入口为 rate.module.ts使用前在组件中引入NzRateModule即可例如官方 basic 示例import { Component } from angular/core; import { FormsModule } from angular/forms; import { NzRateModule } from ng-zorro-antd/rate; Component({ selector: nz-demo-rate-basic, imports: [FormsModule, NzRateModule], template: nz-rate [ngModel]0 / }) export class NzDemoRateBasicComponent {}API 属性详解nz-rate组件的全部可配置属性如下表所示PropertyDescriptiontypeDefaultGlobal Config[nzAllowClear]是否允许再次点击后清除booleantrue✅[nzAllowHalf]是否允许半星选择booleanfalse✅[nzAutoFocus]组件挂载时自动获得焦点booleanfalse[nzCharacter]自定义评分的字符TemplateRefvoidnz-icon nzTypestar /[nzCount]星星数量number5[nzDisabled]只读无法交互booleanfalse[nzTooltips]为每一颗星星自定义提示文案string[][][ngModel]当前值双向绑定number-(ngModelChange)选中值变化时的回调EventEmitternumber-(nzOnBlur)组件失去焦点时的回调EventEmitterFocusEvent-(nzOnFocus)组件获得焦点时的回调EventEmitterFocusEvent-(nzOnHoverChange)悬停/离开星星时的回调EventEmitternumber-(nzOnKeyDown)组件上按键按下时的回调EventEmitterKeyboardEvent-交互与显示类属性nzAllowClear默认true决定用户点击当前已选中的分值后是否将评分清零。实现位于 rate.component.ts 的onItemClick当nzValue与点击得到的actualValue相等且nzAllowClear为真时将值重置为0并触发onChange。官方 clear 示例 展示了同一把评分在允许清除与禁止清除两种配置下的行为对比。nzAllowHalf默认false是否支持半星评分。启用后ngModel可以携带如2.5这样的小数值例如 half 示例 中的nz-rate [ngModel]2.5 nzAllowHalf /。半星的核心实现见下文「半星与悬停的源码剖析」。nzAutoFocus默认false组件挂载后自动聚焦。源码中通过ngOnChanges监听该属性的变化并在非首次变更时给内部ul元素动态添加或移除autofocus特性见 rate.component.ts。nzCount默认5星星总数。变更时调用updateStarArray()重新生成星星索引数组starArray见 rate.component.ts。nzDisabled默认false只读模式。除了在模板上为ul添加ant-rate-disabled类、并把tabindex置为-1外源码还在onItemClick与onItemHover入口处直接拦截返回确保禁用状态下点击与悬停均不生效见 rate.component.ts。官方 disabled 示例 用法为nz-rate [ngModel]2 nzDisabled /。nzTooltips默认[]为每一颗星星配置 tooltip 文案的字符串数组。模板中每个li都挂载了nz-tooltip指令并将nzTooltips[$index]作为提示标题见 rate.component.ts。官方 text 示例 中将其与ant-rate-text文本配合展示等级文案Component({ selector: nz-demo-rate-text, imports: [FormsModule, NzRateModule], template: nz-rate [(ngModel)]value [nzTooltips]tooltips / if (value(); as rate) { span classant-rate-text{{ rate ? tooltips[rate - 1] : }}/span } }) export class NzDemoRateTextComponent { readonly tooltips [terrible, bad, normal, good, wonderful]; readonly value signal(3); }自定义字符nzCharacternzCharacter接受一个TemplateRef用于替换默认的星形图标默认渲染nz-icon nzTypestar nzThemefill /见 rate-item.component.ts。它可以把星星替换为字母、数字、图标字体甚至中文character 示例 给出了三种典型用法nz-rate [ngModel]0 nzAllowHalf [nzCharacter]characterIcon / br / nz-rate [ngModel]0 nzAllowHalf classlarge [nzCharacter]characterEnLetter / br / nz-rate [ngModel]0 nzAllowHalf [nzCharacter]characterZhLetter / ng-template #characterIconnz-icon nzTypeheart //ng-template ng-template #characterZhLetter好/ng-template ng-template #characterEnLetterA/ng-template更进一步模板可以接收当前星星的索引模板上下文中的$implicit为索引值实现「按索引逐个定制字符」的 customize 示例例如用表情图标表达渐进式满意度ng-template #characterNumber let-index {{ index 1 }} /ng-template 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$implicit索引的注入位置在 rate-item.component.ts内部通过ngTemplateOutletContext将{ $implicit: index }传入自定义模板同时在未提供自定义模板时回退到默认星形图标。事件回调(ngModelChange)选中值变化时触发配合[ngModel]完成双向绑定(nzOnHoverChange)悬停/离开某颗星星时触发参数为当前悬停分值。onItemHover与onRateLeave均会发出该事件见 rate.component.ts适合做实时预览文案等联动效果(nzOnFocus)/(nzOnBlur)组件获得/失去焦点时触发。源码在ngOnInit中通过fromEventOutsideAngular订阅ul的focus与blur事件仅在存在订阅者时才进入 Angular Zone 派发事件见 rate.component.ts兼顾性能(nzOnKeyDown)组件上发生键盘事件时触发仅在键盘操作真正改变评分值时发出见 rate.component.ts。组件方法NameDescriptionblur()移除焦点focus()获取焦点这两个方法直接作用于内部ul原生元素focus()调用ulElement.nativeElement.focus()blur()调用ulElement.nativeElement.blur()见 rate.component.ts。需要程序化控制焦点时可通过ViewChild(NzRateComponent)获取实例后调用。全局配置nzAllowClear与nzAllowHalf两项属性支持通过 ng-zorro-antd 的全局配置体系统一设置表格中 Global Config 列为 ✅。源码中这两项属性同时标注了WithConfig()装饰器并以rate作为配置模块名见 rate.component.ts。配置方式为调用NzConfigService的set方法例如统一关闭清除并开启半星import { NzConfigService } from ng-zorro-antd/core/config; constructor(private nzConfigService: NzConfigService) { this.nzConfigService.set(rate, { nzAllowClear: false, nzAllowHalf: true }); }组件构造时还会通过onConfigChangeEventForComponent(rate, ...)订阅全局配置变更事件并触发重新检测见 rate.component.ts保证运行期修改全局配置能即时反映到已渲染的组件上。半星与悬停的源码剖析Rate 组件的半星与悬停反馈依赖内部nz-rate-item指令式组件实现。每个评分单元渲染为两层结构见 rate-item.component.tsant-rate-star-second前半层mouseover/click时以false上报事件ant-rate-star-first后半层mouseover/click时以true上报事件。事件是否被当作「半星」处理由hoverRate(isHalf)与clickRate(isHalf)中的isHalf this.allowHalf决定——只有开启了nzAllowHalf时后半层悬停/点击才会计为半星见 rate-item.component.ts。父组件 rate.component.ts 的onItemClick据此计算实际分值isHalf ? index 0.5 : index 1。评分值到 CSS 类的映射集中在updateStarStyle()见 rate.component.ts通过为每颗星计算ant-rate-star-full/-half/-active/-zero/-focused等类名驱动 index.less 中的视觉样式从而实现整星、半星、聚焦态的差异化渲染。表单集成与键盘可访问性Rate 组件实现了ControlValueAccessor在providers中以NG_VALUE_ACCESSOR多提供项注册见 rate.component.ts因此可以无缝配合 Angular 的模板驱动表单与响应式表单writeValue(value)将外部值写入组件同时更新星星样式见 rate.component.tsregisterOnChange/registerOnTouched注册值变化与 touched 回调见 rate.component.tssetDisabledState响应表单的禁用状态与nzDisabled输入叠加生效见 rate.component.ts。键盘操作方面源码在ul上监听了keydown并阻止默认行为RIGHT_ARROW在未达上限时增加分值开启半星时每次0.5否则每次1LEFT_ARROW在大于0时相应减少只有分值实际变化时才触发onChange、nzOnKeyDown与样式刷新见 rate.component.ts。结合[tabindex]nzDisabled ? -1 : 0见 rate.component.ts未禁用状态下用户可直接聚焦评分组件并用方向键打分满足键盘可访问性要求。样式与 RTL 支持组件样式位于 style/index.less组件自身采用ViewEncapsulation.None允许外部通过全局样式或::ng-deep覆盖星星尺寸等细节如 character 示例 中通过::ng-deep .ant-rate-star { font-size: 36px; }放大评分字符。此外组件通过注入Directionality的valueSignal检测文档方向并在模板中为ul添加ant-rate-rtl类见 rate.component.ts因此在 RTL 布局下评分方向会自动镜像无需额外处理。快速上手清单在组件中引入NzRateModule必要时同时引入FormsModule以使用ngModel双向绑定基础评分nz-rate [(ngModel)]value /需要半星追加nzAllowHalf并将初始值设为x.5形式需要只读展示追加nzDisabled只传入[ngModel]即可需要自定义图形或文字通过[nzCharacter]传入ng-template模板上下文$implicit为星星索引需要星级文案传入与nzCount等长的[nzTooltips]字符串数组并配合(nzOnHoverChange)或(ngModelChange)展示当前等级文案需要统一默认行为通过NzConfigService.set(rate, ...)全局配置nzAllowClear与nzAllowHalf。以上用法均有对应演示用例可供参考基础见 basic.ts、半星见 half.ts、清除行为见 clear.ts、自定义字符见 character.ts 与 customize.ts、只读见 disabled.ts、提示文案见 text.ts。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Pagination 分页组件完全指南API 详解、源码原理与全局配置实战ng zorro antd Pagination 分页组件完全指南API 详解、源码原理与全局配置实战 导读 本篇技术指南以 ng zorro antdAnUI组件前端ng-zorro-antd AutoComplete 组件完全指南API 详解、交互原理与源码剖析ng zorro antd AutoComplete 组件完全指南API 详解、交互原理与源码剖析 导读 AutoComplete自动完成是 ng zorUI组件前端ng-zorro-antd Checkbox 多选框组件完全指南API 详解、源码原理与实战示例ng zorro antd Checkbox 多选框组件完全指南API 详解、源码原理与实战示例 ng zorro antd 是 Angular 生态下基于UI组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 ng-zorro-antd Rate 评分组件完全指南：API 详解、表单集成与源码实现原理
UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载本指南围绕 ng-zorro-antdAngular UI 组件库中的 Rate 评分组件展开系统讲解其全部输入/输出属性、组件方法与全局配置能力并结合 rate.component.ts 源码与 rate 组件演示用例 剖析评分交互、半星机制、键盘操作与双向绑定的底层实现。读完本文你将掌握 Rate 组件的完整配置方式并能基于nzCharacter模板与表单集成实现自定义的评分场景。何时使用 Rate 组件Rate 组件用于对某事物进行评分操作在 ng-zorro-antd 中对应的选择器为nz-rate官方使用场景界定如下展示评价以星级形式直观呈现他人或系统对某对象商品、内容、服务等的评价结果快速评分操作让用户通过点击或键盘快速完成一次打分例如满意度调查、内容质量评分等。从源码结构看Rate 组件由两个文件构成rate.component.ts对外主组件负责状态管理与事件分发和 rate-item.component.ts内部单颗星星渲染单元负责半星与悬停反馈。模块入口为 rate.module.ts使用前在组件中引入NzRateModule即可例如官方 basic 示例import { Component } from angular/core; import { FormsModule } from angular/forms; import { NzRateModule } from ng-zorro-antd/rate; Component({ selector: nz-demo-rate-basic, imports: [FormsModule, NzRateModule], template: nz-rate [ngModel]0 / }) export class NzDemoRateBasicComponent {}API 属性详解nz-rate组件的全部可配置属性如下表所示PropertyDescriptiontypeDefaultGlobal Config[nzAllowClear]是否允许再次点击后清除booleantrue✅[nzAllowHalf]是否允许半星选择booleanfalse✅[nzAutoFocus]组件挂载时自动获得焦点booleanfalse[nzCharacter]自定义评分的字符TemplateRefvoidnz-icon nzTypestar /[nzCount]星星数量number5[nzDisabled]只读无法交互booleanfalse[nzTooltips]为每一颗星星自定义提示文案string[][][ngModel]当前值双向绑定number-(ngModelChange)选中值变化时的回调EventEmitternumber-(nzOnBlur)组件失去焦点时的回调EventEmitterFocusEvent-(nzOnFocus)组件获得焦点时的回调EventEmitterFocusEvent-(nzOnHoverChange)悬停/离开星星时的回调EventEmitternumber-(nzOnKeyDown)组件上按键按下时的回调EventEmitterKeyboardEvent-交互与显示类属性nzAllowClear默认true决定用户点击当前已选中的分值后是否将评分清零。实现位于 rate.component.ts 的onItemClick当nzValue与点击得到的actualValue相等且nzAllowClear为真时将值重置为0并触发onChange。官方 clear 示例 展示了同一把评分在允许清除与禁止清除两种配置下的行为对比。nzAllowHalf默认false是否支持半星评分。启用后ngModel可以携带如2.5这样的小数值例如 half 示例 中的nz-rate [ngModel]2.5 nzAllowHalf /。半星的核心实现见下文「半星与悬停的源码剖析」。nzAutoFocus默认false组件挂载后自动聚焦。源码中通过ngOnChanges监听该属性的变化并在非首次变更时给内部ul元素动态添加或移除autofocus特性见 rate.component.ts。nzCount默认5星星总数。变更时调用updateStarArray()重新生成星星索引数组starArray见 rate.component.ts。nzDisabled默认false只读模式。除了在模板上为ul添加ant-rate-disabled类、并把tabindex置为-1外源码还在onItemClick与onItemHover入口处直接拦截返回确保禁用状态下点击与悬停均不生效见 rate.component.ts。官方 disabled 示例 用法为nz-rate [ngModel]2 nzDisabled /。nzTooltips默认[]为每一颗星星配置 tooltip 文案的字符串数组。模板中每个li都挂载了nz-tooltip指令并将nzTooltips[$index]作为提示标题见 rate.component.ts。官方 text 示例 中将其与ant-rate-text文本配合展示等级文案Component({ selector: nz-demo-rate-text, imports: [FormsModule, NzRateModule], template: nz-rate [(ngModel)]value [nzTooltips]tooltips / if (value(); as rate) { span classant-rate-text{{ rate ? tooltips[rate - 1] : }}/span } }) export class NzDemoRateTextComponent { readonly tooltips [terrible, bad, normal, good, wonderful]; readonly value signal(3); }自定义字符nzCharacternzCharacter接受一个TemplateRef用于替换默认的星形图标默认渲染nz-icon nzTypestar nzThemefill /见 rate-item.component.ts。它可以把星星替换为字母、数字、图标字体甚至中文character 示例 给出了三种典型用法nz-rate [ngModel]0 nzAllowHalf [nzCharacter]characterIcon / br / nz-rate [ngModel]0 nzAllowHalf classlarge [nzCharacter]characterEnLetter / br / nz-rate [ngModel]0 nzAllowHalf [nzCharacter]characterZhLetter / ng-template #characterIconnz-icon nzTypeheart //ng-template ng-template #characterZhLetter好/ng-template ng-template #characterEnLetterA/ng-template更进一步模板可以接收当前星星的索引模板上下文中的$implicit为索引值实现「按索引逐个定制字符」的 customize 示例例如用表情图标表达渐进式满意度ng-template #characterNumber let-index {{ index 1 }} /ng-template 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$implicit索引的注入位置在 rate-item.component.ts内部通过ngTemplateOutletContext将{ $implicit: index }传入自定义模板同时在未提供自定义模板时回退到默认星形图标。事件回调(ngModelChange)选中值变化时触发配合[ngModel]完成双向绑定(nzOnHoverChange)悬停/离开某颗星星时触发参数为当前悬停分值。onItemHover与onRateLeave均会发出该事件见 rate.component.ts适合做实时预览文案等联动效果(nzOnFocus)/(nzOnBlur)组件获得/失去焦点时触发。源码在ngOnInit中通过fromEventOutsideAngular订阅ul的focus与blur事件仅在存在订阅者时才进入 Angular Zone 派发事件见 rate.component.ts兼顾性能(nzOnKeyDown)组件上发生键盘事件时触发仅在键盘操作真正改变评分值时发出见 rate.component.ts。组件方法NameDescriptionblur()移除焦点focus()获取焦点这两个方法直接作用于内部ul原生元素focus()调用ulElement.nativeElement.focus()blur()调用ulElement.nativeElement.blur()见 rate.component.ts。需要程序化控制焦点时可通过ViewChild(NzRateComponent)获取实例后调用。全局配置nzAllowClear与nzAllowHalf两项属性支持通过 ng-zorro-antd 的全局配置体系统一设置表格中 Global Config 列为 ✅。源码中这两项属性同时标注了WithConfig()装饰器并以rate作为配置模块名见 rate.component.ts。配置方式为调用NzConfigService的set方法例如统一关闭清除并开启半星import { NzConfigService } from ng-zorro-antd/core/config; constructor(private nzConfigService: NzConfigService) { this.nzConfigService.set(rate, { nzAllowClear: false, nzAllowHalf: true }); }组件构造时还会通过onConfigChangeEventForComponent(rate, ...)订阅全局配置变更事件并触发重新检测见 rate.component.ts保证运行期修改全局配置能即时反映到已渲染的组件上。半星与悬停的源码剖析Rate 组件的半星与悬停反馈依赖内部nz-rate-item指令式组件实现。每个评分单元渲染为两层结构见 rate-item.component.tsant-rate-star-second前半层mouseover/click时以false上报事件ant-rate-star-first后半层mouseover/click时以true上报事件。事件是否被当作「半星」处理由hoverRate(isHalf)与clickRate(isHalf)中的isHalf this.allowHalf决定——只有开启了nzAllowHalf时后半层悬停/点击才会计为半星见 rate-item.component.ts。父组件 rate.component.ts 的onItemClick据此计算实际分值isHalf ? index 0.5 : index 1。评分值到 CSS 类的映射集中在updateStarStyle()见 rate.component.ts通过为每颗星计算ant-rate-star-full/-half/-active/-zero/-focused等类名驱动 index.less 中的视觉样式从而实现整星、半星、聚焦态的差异化渲染。表单集成与键盘可访问性Rate 组件实现了ControlValueAccessor在providers中以NG_VALUE_ACCESSOR多提供项注册见 rate.component.ts因此可以无缝配合 Angular 的模板驱动表单与响应式表单writeValue(value)将外部值写入组件同时更新星星样式见 rate.component.tsregisterOnChange/registerOnTouched注册值变化与 touched 回调见 rate.component.tssetDisabledState响应表单的禁用状态与nzDisabled输入叠加生效见 rate.component.ts。键盘操作方面源码在ul上监听了keydown并阻止默认行为RIGHT_ARROW在未达上限时增加分值开启半星时每次0.5否则每次1LEFT_ARROW在大于0时相应减少只有分值实际变化时才触发onChange、nzOnKeyDown与样式刷新见 rate.component.ts。结合[tabindex]nzDisabled ? -1 : 0见 rate.component.ts未禁用状态下用户可直接聚焦评分组件并用方向键打分满足键盘可访问性要求。样式与 RTL 支持组件样式位于 style/index.less组件自身采用ViewEncapsulation.None允许外部通过全局样式或::ng-deep覆盖星星尺寸等细节如 character 示例 中通过::ng-deep .ant-rate-star { font-size: 36px; }放大评分字符。此外组件通过注入Directionality的valueSignal检测文档方向并在模板中为ul添加ant-rate-rtl类见 rate.component.ts因此在 RTL 布局下评分方向会自动镜像无需额外处理。快速上手清单在组件中引入NzRateModule必要时同时引入FormsModule以使用ngModel双向绑定基础评分nz-rate [(ngModel)]value /需要半星追加nzAllowHalf并将初始值设为x.5形式需要只读展示追加nzDisabled只传入[ngModel]即可需要自定义图形或文字通过[nzCharacter]传入ng-template模板上下文$implicit为星星索引需要星级文案传入与nzCount等长的[nzTooltips]字符串数组并配合(nzOnHoverChange)或(ngModelChange)展示当前等级文案需要统一默认行为通过NzConfigService.set(rate, ...)全局配置nzAllowClear与nzAllowHalf。以上用法均有对应演示用例可供参考基础见 basic.ts、半星见 half.ts、清除行为见 clear.ts、自定义字符见 character.ts 与 customize.ts、只读见 disabled.ts、提示文案见 text.ts。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Pagination 分页组件完全指南API 详解、源码原理与全局配置实战ng zorro antd Pagination 分页组件完全指南API 详解、源码原理与全局配置实战 导读 本篇技术指南以 ng zorro antdAnUI组件前端ng-zorro-antd AutoComplete 组件完全指南API 详解、交互原理与源码剖析ng zorro antd AutoComplete 组件完全指南API 详解、交互原理与源码剖析 导读 AutoComplete自动完成是 ng zorUI组件前端ng-zorro-antd Checkbox 多选框组件完全指南API 详解、源码原理与实战示例ng zorro antd Checkbox 多选框组件完全指南API 详解、源码原理与实战示例 ng zorro antd 是 Angular 生态下基于UI组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考