UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读Radio单选框是 ng-zorro-antd 组件库中用于“在多个备选项中选中单个状态”的数据录入组件。本文基于 components/radio/doc/index.zh-CN.md 官方文档结合仓库内NzRadioComponent、NzRadioGroupComponent、NzRadioService的真实源码与 demo 示例完整讲解 Radio 的 API 参数、按钮样式、表单双向绑定、禁用与尺寸控制并深入剖析其基于ControlValueAccessor与 RxJS 服务通信的底层实现原理。读完后你将能熟练在 Angular 项目中使用 Radio 处理单选场景并理解其状态同步机制。何时使用 RadioRadio 的核心定位非常明确在多个备选项中选中单个状态。它与 Select 组件的关键区别在于Radio 所有选项默认可见用户无需展开下拉即可直接比较并点选适合选项数量不多的场景正因为选项全部平铺展示选项不宜过多否则会占据大量页面空间、影响浏览效率。因此当需要用户从两到五个左右的候选项中做唯一选择、且希望选项一目了然时Radio 是最合适的控件而当选项数量庞大或需要节省空间时则应改用 Select 等组件。快速开始引入模块与最小示例Radio 组件由NzRadioModule提供使用时在组件或模块中导入即可import { FormsModule } from angular/forms; import { NzRadioModule } from ng-zorro-antd/radio;最小示例来自 components/radio/demo/basic.tsimport { Component } from angular/core; import { FormsModule } from angular/forms; import { NzRadioModule } from ng-zorro-antd/radio; Component({ selector: nz-demo-radio-basic, imports: [FormsModule, NzRadioModule], template: label nz-radio ngModelRadio/label }) export class NzDemoRadioBasicComponent {}注意这里的用法nz-radio是属性型指令需要挂在label元素上使用其内部模板会渲染出带ant-radio样式类的真实input[typeradio]详见 radio.component.ts 的组件装饰器定义。ngModel双向绑定的是选中状态布尔值。API 详解[nz-radio] / [nz-radio-button]这两个属性型指令共享同一套参数。nz-radio-button会将单选框渲染为按钮形态对应样式类ant-radio-button-wrapper二者的完整参数如下参数说明类型默认值[nzAutoFocus]自动获取焦点booleanfalse[nzDisabled]设定 disable 状态booleanfalse[ngModel]指定当前是否选中可双向绑定booleanfalse[nzValue]设置 value与nz-radio-group配合使用any-(ngModelChange)选中变化时回调EventEmitterboolean-从源码实现看radio.component.tsnzDisabled与nzAutoFocus都通过 Angular 的booleanAttribute变换接收输入意味着可以直接写nzDisabled等价于true也支持[nzDisabled]someVar动态绑定Input() nzValue: NzSafeAny | null null; Input({ transform: booleanAttribute }) nzDisabled false; Input({ transform: booleanAttribute }) nzAutoFocus false; Input({ alias: nz-radio-button, transform: booleanAttribute }) isRadioButton false;使用要点单独使用不放在 group 内时ngModel绑定的是布尔选中状态例如label nz-radio [ngModel]true (ngModelChange)onChange($event)已选中/labelnzValue本身不参与独立单选的值语义它是为配合nz-radio-group的“值相等即选中”机制设计的nzAutoFocus生效时机在组件视图初始化之后ngAfterViewInit源码中会自动调用内部的focus()方法radio.component.ts。nz-radio-groupnz-radio-group是单选框组合容器用于包裹一组nz-radio让它们共享选中值、name 与禁用状态。完整参数如下参数说明类型默认值[ngModel]指定选中的nz-radio的 value 值any-[nzName]nz-radio-group下所有input[typeradio]的name属性string-[nzDisabled]设定所有nz-radiodisable 状态booleanfalse[nzSize]大小只对按钮样式生效large \| small \| defaultdefault(ngModelChange)选中变化时回调EventEmitterboolean-[nzButtonStyle]RadioButton 的风格样式目前有描边和填色两种风格outline \| solidoutline典型用法来自 components/radio/demo/radiogroup.tsimport { Component, signal } from angular/core; import { FormsModule } from angular/forms; import { NzRadioModule } from ng-zorro-antd/radio; Component({ selector: nz-demo-radio-radiogroup, imports: [FormsModule, NzRadioModule], template: nz-radio-group [(ngModel)]value label nz-radio nzValueAA/label label nz-radio nzValueBB/label label nz-radio nzValueCC/label label nz-radio nzValueDD/label /nz-radio-group }) export class NzDemoRadioRadiogroupComponent { readonly value signal(A); }此时[(ngModel)]绑定的不再是布尔值而是被选中项的nzValue。选中任意一项后group 的ngModel值即等于该项的nzValue实现值与选项的解耦——这正是 Radio 组件的核心数据模型。参数细节说明nzSize只对nz-radio-button按钮形态生效取值large | small | default。源码中 group 组件会依据该值切换宿主类ant-radio-group-large/ant-radio-group-smallradio-group.component.ts另外它还会读取可选的NZ_FORM_SIZE表单级尺寸 token最终尺寸取nzFormSize优先于自身nzSizefinalSize computed(() this.nzFormSize?.() || this.size())。nzButtonStyle仅对按钮形态生效outline为描边风格默认solid为填色风格宿主类为ant-radio-group-solidradio-group.component.ts。nzName为组内所有真实 radio 输入框统一设置原生name属性保证浏览器层面同一表单内的单选互斥语义。nzDisabled一键禁用组内全部选项。组件方法focus() 与 blur()[nz-radio]指令对应的实例是NzRadioComponent可通过ViewChild等方式获取后调用以下方法名称描述blur()移除焦点focus()获取焦点源码实现radio.component.ts中focus()借助 Angular CDK 的FocusMonitor.focusVia(element, keyboard)以键盘语义聚焦blur()则直接调用原生元素的blur()focus(): void { this.focusMonitor.focusVia(this.inputElement!, keyboard); } blur(): void { this.inputElement!.nativeElement.blur(); }示例ViewChild(NzRadioComponent) radio!: NzRadioComponent; ngAfterViewInit(): void { this.radio.focus(); }源码级原理状态是如何在组件间同步的双向绑定基于 ControlValueAccessorNzRadioComponent与NzRadioGroupComponent都实现了 Angular 表单的ControlValueAccessor接口并在组件 providers 中以NG_VALUE_ACCESSOR注册radio.component.ts、radio-group.component.ts。这意味着它们不仅能与模板驱动表单的ngModel协同也能无缝接入响应式表单的formControlName/formControl由 Angular 表单机制统一驱动writeValue、registerOnChange、registerOnTouched、setDisabledState。其中setDisabledState的实现体现了组件对“模板绑定与表单禁用”的合并策略radio-group.component.tssetDisabledState(isDisabled: boolean): void { this.nzDisabled (this.isNzDisableFirstChange this.nzDisabled) || isDisabled; this.isNzDisableFirstChange false; this.nzRadioService.setDisabled(this.nzDisabled); this.cdr.markForCheck(); }首次变更时若模板上已设置nzDisabled则保留模板值否则采用表单控制器的禁用状态随后广播到组内所有选项。NzRadioService组内通信的桥梁group 与内部 radio 之间不直接互相引用而是通过由nz-radio-group在 providers 中提供的NzRadioService通信radio-group.component.ts。该服务内部用 RxJS 的ReplaySubject/Subject维护四条数据流radio.service.ts数据流类型语义selected$ReplaySubject(1)当前选中的 value回放最新值disabled$ReplaySubject(1)组级禁用状态回放最新值name$ReplaySubject(1)组级 name回放最新值touched$Subject触摸失焦事件通知每个NzRadioComponent在ngOnInit中订阅这三条流收到name$更新原生输入框的name属性、收到disabled$更新自身禁用态、收到selected$后通过nzValue value判断自己是否应处于选中状态radio.component.ts。值得注意的优化细节当组内有 8 个 radio 且全部通过ngModel/formControl连接时selected$的每次发射会触发 8 个组件的回调若逐一调用onChange会造成重复通知。源码通过“仅当选中状态由 true 变为 false 时才向外发射 false”来规避radio.component.ts因为选中的 true 值已在点击回调中直接发射过。点击与选中链路单选交互的核心链路位于setupClickListenerradio.component.ts使用fromEventOutsideAngular在 Angular 变更检测之外监听点击先stopPropagation/preventDefault防止 label 双触发若已禁用或已选中则直接返回在ngZone.run内调用focus()获得焦点并调用nzRadioService.select(nzValue)广播新选中值若自身处于ngModel模式则直接置isChecked true并onChange(true)。group 侧在ngOnInit中订阅selected$仅在值确实变化时才调用自己的onChange向外上报同时订阅touched$在下一轮宏任务中触发onTouchedradio-group.component.ts从而完整支持表单脏值与触摸校验。进阶实战场景禁用状态nzDisabled既可用于单个选项也可用于整个 group来自 components/radio/demo/disable.tsimport { Component, signal } from angular/core; import { FormsModule } from angular/forms; import { NzButtonModule } from ng-zorro-antd/button; import { NzRadioModule } from ng-zorro-antd/radio; Component({ selector: nz-demo-radio-disable, imports: [FormsModule, NzButtonModule, NzRadioModule], template: div label nz-radio [nzDisabled]disabled()Disabled/label br / label nz-radio [nzDisabled]disabled() [ngModel]trueDisabled/label br / br / button nz-button nzTypeprimary (click)disabled.update(value !value)Toggle disabled/button /div }) export class NzDemoRadioDisableComponent { readonly disabled signal(true); }通过disabled.update(...)切换 signal 即可联动所有选项的禁用态注意[ngModel]true的写法在禁用示例中用于演示“已选中的禁用项”。按钮形态与尺寸、填色风格按钮形态nz-radio-button支持三种尺寸与两种风格来自 components/radio/demo/size.ts 与 components/radio/demo/solid.tsnz-radio-group [(ngModel)]value nzSizelarge label nz-radio-button nzValueAHangzhou/label label nz-radio-button nzValueBShanghai/label label nz-radio-button nzValueCBeijing/label label nz-radio-button nzValueDChengdu/label /nz-radio-group nz-radio-group [(ngModel)]value nzSizesmall label nz-radio-button nzValueAHangzhou/label label nz-radio-button nzValueBShanghai/label label nz-radio-button nzValueCBeijing/label label nz-radio-button nzValueDChengdu/label /nz-radio-group nz-radio-group [(ngModel)]value nzButtonStylesolid label nz-radio-button nzValueAHangzhou/label label nz-radio-button nzValueBShanghai/label label nz-radio-button nzValueCBeijing/label label nz-radio-button nzValueDChengdu/label /nz-radio-group不写nzSize即为default默认尺寸nzButtonStylesolid呈现填色实心风格默认outline为描边风格。循环渲染选项列表当选项来自数组时可直接用for配合nzValue渲染来自 components/radio/demo/radiogroup-options.tsimport { Component, signal } from angular/core; import { FormsModule } from angular/forms; import { NzRadioModule } from ng-zorro-antd/radio; Component({ selector: nz-demo-radio-radiogroup-options, imports: [FormsModule, NzRadioModule], template: nz-radio-group [(ngModel)]value for (o of options; track o.value) { label nz-radio [nzValue]o.value{{ o.label }}/label } /nz-radio-group }) export class NzDemoRadioRadiogroupOptionsComponent { readonly value signal(Apple); readonly options [ { label: Apple, value: Apple }, { label: Pear, value: Pear }, { label: Orange, value: Orange } ]; }由于nzValue的类型是any选项值可以是字符串、数字乃至对象引用需保证相等性判断一致。设置原生 name如需与原生表单联动或保证组内 radio 的原生name一致使用nzName来自 components/radio/demo/radiogroup-with-name.tsnz-radio-group [(ngModel)]value nzNameradiogroup label nz-radio nzValueAA/label label nz-radio nzValueBB/label label nz-radio nzValueCC/label label nz-radio nzValueDD/label /nz-radio-group样式与 RTL 支持Radio 的样式分三个 less 文件管理components/radio/styleindex.less为组件主体样式patch.less为差异修补entry.less为入口聚合。组件的宿主类如ant-radio-wrapper-checked、ant-radio-button-wrapper-disabled、ant-radio-wrapper-rtl等在 radio.component.ts 中根据状态动态切换。此外NzRadioComponent与NzRadioGroupComponent都注入了 CDK 的Directionality当应用处于 RTL 方向时会自动添加-rtl宿主类radio.component.ts、radio-group.component.ts因此无需任何额外配置即可在 RTL 布局中正确渲染。总结选型选项少、需要全部可见时用 Radio选项多时改用 Select两种形态nz-radio圆点样式与nz-radio-button按钮样式后者支持nzSize尺寸与nzButtonStyle描边/填色风格数据模型独立使用时ngModel绑定布尔选中态放在nz-radio-group内时绑定被选中项的nzValue任意类型表单能力基于ControlValueAccessor同时支持模板驱动与响应式表单禁用态由组件属性与表单控制器合并决定实现原理group 通过NzRadioService的 RxJS 流selected$、disabled$、name$、touched$向所有内部 radio 广播状态点击链路在ngZone之外监听并选择性触发变更检测兼顾性能与正确性。相关源码可继续深入查阅radio.component.ts、radio-group.component.ts、radio.service.ts、radio.module.ts以及 components/radio/demo 目录下的全部示例。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐CANN/pyasc矩阵乘法形状设置asc.lib.host.MatmulApiTiling.set_org_shape MatmulApiTiling.set_org_shape \ args,UI组件前端cool-retro-term直播与录屏完整指南5个技巧让终端成为镜头下的视觉焦点cool retro term直播与录屏完整指南5个技巧让终端成为镜头下的视觉焦点 cool retro term 是一款模拟老式阴极射线管CRT显示效果UI组件前端ng-zorro-antd Pagination 分页组件完整指南从基础用法到源码级原理解析ng zorro antd Pagination 分页组件完整指南从基础用法到源码级原理解析 分页器Pagination是 ng zorro antd 中UI组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考