UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读本文围绕 ng-zorro-antd 的 Rate评分组件只读用法展开讲解如何通过nzDisabled属性让评分组件进入只读、无法进行鼠标交互的状态并深入源码与测试说明禁用状态在点击、悬停、键盘、Tab 焦点以及表单联动等多个维度的具体行为。读完本文你将掌握在展示型场景如订单评价结果回显中正确配置只读评分的方法并理解其底层实现原理。一、只读模式场景与核心用法Rate 组件在 ng-zorro-antd 中用于对事物进行评分操作见 组件文档。但并非所有出现评分的地方都需要用户打分——例如查看历史评价、展示订单服务评分时评分结果只是被展示而非被修改。这时就需要让 Rate 进入只读状态。官方 democomponents/rate/demo/disabled.md对只读模式的描述非常精炼只读无法进行鼠标交互。配套的完整示例代码位于 components/rate/demo/disabled.tsimport { Component } from angular/core; import { FormsModule } from angular/forms; import { NzRateModule } from ng-zorro-antd/rate; Component({ selector: nz-demo-rate-disabled, imports: [FormsModule, NzRateModule], template: nz-rate [ngModel]2 nzDisabled / }) export class NzDemoRateDisabledComponent {}这个示例只有三个要点却覆盖了只读模式的核心配置引入FormsModule与NzRateModule模块定义见 components/rate/rate.module.ts其中NzRateModule导出NzRateComponent通过[ngModel]2将初始评分设置为 2 分单向数据绑定只读场景下用户无法改值通过属性nzDisabled等价于[nzDisabled]true启用只读状态。二、nzDisabled API 速查在 组件文档 API 表格 中nzDisabled的定义如下属性说明类型默认值[nzDisabled]只读无法进行交互booleanfalse需要说明两点边界nzDisabled不参与全局配置WithConfig机制只作用于nzAllowClear与nzAllowHalf见 rate.component.ts它始终是组件级属性与nzCountstar 总数默认 5、ngModel当前数默认 0配合使用时只读评分可完整呈现任意分值。Rate 组件的完整属性集还包括nzAllowClear、nzAllowHalf、nzAutoFocus、nzCharacter、nzTooltips以及(ngModelChange)、(nzOnFocus)、(nzOnBlur)、(nzOnHoverChange)、(nzOnKeyDown)等回调并暴露focus()与blur()两个方法这些都在只读模式下有着对应的行为差异详见下文。三、源码级解析只读模式禁掉了什么只读不仅仅是加一个 CSS 类。从 rate.component.ts 的模板与事件处理可以完整还原nzDisabled的实际效果。3.1 点击与悬停被直接短路Rate 组件将每个星星委托给NzRateItemComponentrate-item.component.ts处理mouseover与click再上抛itemHover、itemClick事件。而在组件主类中onItemClick(index: number, isHalf: boolean): void { if (this.nzDisabled) { return; } // ... } onItemHover(index: number, isHalf: boolean): void { if (this.nzDisabled) { return; } // ... }即禁用状态下点击与悬停事件在入口处直接短路返回既不会修改nzValue也不会触发ngModelChange更不会发出nzOnHoverChange。测试 rate.spec.ts 对此有明确断言——禁用后点击第 4 颗星值保持 0、modelChange调用次数保持 0悬停测试同样验证了禁用后onHoverChange不再增加调用次数见同文件should hover rate work用例。3.2 键盘操作同样失效Rate 支持方向键评分RIGHT_ARROW加分、LEFT_ARROW减分配合nzAllowHalf可每次 0.5 分。虽然键盘事件处理器onKeyDown中未显式判断nzDisabled但nzDisabled会将外层ul的tabindex置为-1见模板中的[tabindex]nzDisabled ? -1 : 0使组件整体从 Tab 键顺序中移除键盘自然无法聚焦也就无法触发按键评分。相关测试见 rate.spec.ts启用时tabindex为0禁用后变为-1。3.3 样式层同步禁用模板通过[class.ant-rate-disabled]nzDisabled绑定样式类style/index.less 中对应的规则为-disabled -star { cursor: default; div:hover { transform: scale(1); } }普通状态下星星 hover 会有rate-star-hover-scale的放大过渡transition: all 0.3s而禁用后鼠标指针变为默认样式hover 放大效果被取消从视觉与交互两个层面彻底静默。四、与表单的联动不只靠 nzDisabledNzRateComponent实现了ControlValueAccessor见 rate.component.ts因此既支持模板驱动表单ngModel也支持响应式表单formControl。在禁用控制上两者是叠加关系setDisabledState(isDisabled: boolean): void { this.nzDisabled (this.isNzDisableFirstChange this.nzDisabled) || isDisabled; this.isNzDisableFirstChange false; this.cdr.markForCheck(); }也就是说只要表单控件被formControl.disable()禁用组件就会自动进入只读无需再手动设置nzDisabled。测试 rate.spec.ts 覆盖了三种典型组合表单启用 nzDisabledtrue进入只读表单禁用 nzDisabledfalse仍进入只读动态切换disable()后点击无效、enable()后点击恢复生效、再次disable()后点击再次无效。在只读展示场景中若数据来自表单模型直接用formControl.disable()即可实现展示评分且禁止修改若数据是静态的如 demo 中的[ngModel]2则用nzDisabled更简洁。五、实战建议与组合用法展示历史评分nz-rate [ngModel]4.5 nzAllowHalf nzDisabled /既保留半星精度又禁止交互禁用时不触发清除nzAllowClear控制再次点击已选中的星会清零默认true但只读状态下点击事件被短路因此无需担心误清除只读 自定义字符/提示nzCharacter可替换星星为任意模板默认是nz-icon nzTypestar /nzTooltips可给每颗星配置悬浮提示两者在只读模式下依然生效适合做带说明的评价回显RTL 支持组件通过Directionality自动处理ant-rate-rtl方向见 rate.component.ts只读模式在 RTL 布局下同样正常。六、小结nzDisabled是 ng-zorro-antd Rate 组件实现只读展示的官方途径它通过短路点击/悬停事件、将 tabindex 置为 -1 移出键盘焦点流、绑定ant-rate-disabled样式类三重机制确保用户无法以任何方式改变评分同时与表单的setDisabledState联动让formControl.disable()也能一键进入只读。在需要只展示评分、不允许修改的场景中[ngModel]2 nzDisabled一行配置即可满足需求并可放心与nzAllowHalf、nzCharacter等特性组合使用。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Rate 评分组件清除机制详解nzAllowClear 的启用与禁用ng zorro antd Rate 评分组件清除机制详解nzAllowClear 的启用与禁用 Rate 评分组件 nz rate 支持再次点击已选中UI组件前端ng-zorro-antd Descriptions 组件详解只读字段分组的表格化渲染与响应式列布局ng zorro antd Descriptions 组件详解只读字段分组的表格化渲染与响应式列布局 本篇指南围绕 NG ZORROng zorro antUI组件前端ng-zorro-antd DatePicker 禁用状态实战nzDisabled、nzDisabledDate 与 nzDisabledTime 全解析ng zorro antd DatePicker 禁用状态实战nzDisabled、nzDisabledDate 与 nzDisabledTime 全解析 本UI组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考