ng-zorro-antd Cron Expression 三种尺寸解析：nzSize 参数的实现、样式与测试验证

• UI组件
• 前端

本文以 ng-zorro-antd 中 Cron Expression（nz-cron-expression）组件的尺寸特性为主线，完整继承官方示例文档「三种大小」的结论——输入框支持large（40px）、default（32px）和small（24px）三种尺寸——并结合组件源码、样式表与单元测试，说明nzSize参数如何被声明、如何映射到具体的 CSS 类、以及如何被测试用例固化验证，帮助你在表单中正确配置并深入理解这一尺寸体系。

三种尺寸是什么

官方示例文档 size.md 给出的核心结论只有两条：

• 输入框支持large（40px）、default（32px）和small（24px）三种尺寸；
• 英文表述为 "There are three sizes of an CronExpression box"，即三种尺寸对应的是整个 Cron 表达式输入区域的高度规格。

这里的「输入框」并非普通文本框，而是 Cron Expression 组件的输入组合体：由一排按时间粒度（minute / hour / day / month / week，spring类型下再加 second）排列的输入格、一行标签组，以及右侧的执行时间预览区构成。三种尺寸描述的是该组合体在页面中的视觉高度规格，分别对应 40px、32px、24px 三个档级，与 ng-zorro-antd 中其他输入类组件（如nz-input）的大/中/小尺寸体系保持一致的命名约定。

官方示例：同时渲染三种尺寸

与该文档配套的演示组件 size.ts 一次性渲染了三种尺寸，可直接复制使用：

import { Component } from '@angular/core'; import { NzCronExpressionModule } from 'ng-zorro-antd/cron-expression'; @Component({ selector: 'nz-demo-cron-expression-size', imports: [NzCronExpressionModule], template: ` <div class="example-cron-expression"> <nz-cron-expression nzSize="small" /> <nz-cron-expression nzSize="default" /> <nz-cron-expression nzSize="large" /> </div> `, styles: ` .example-cron-expression nz-cron-expression { margin: 0 8px 8px 0; } ` }) export class NzDemoCronExpressionSizeComponent {}

可以看到，使用方式就是在nz-cron-expression元素上直接写静态属性nzSize="small" | "default" | "large"，无需额外配置。组件通过NzCronExpressionModule提供，该模块在 cron-expression.module.ts 中仅导出NzCronExpressionComponent，内部的输入格、标签、预览子组件均不对外暴露。

源码实现：nzSize 如何映射为 CSS 类

参数声明与默认值

在 cron-expression.component.ts 中，nzSize声明为一个带默认值的@Input()：

@Input() nzSize: NzCronExpressionSize = 'default';

其取值类型定义在 typings.ts：

export type NzCronExpressionSize = 'large' | 'default' | 'small';

这是一个封闭的三值联合类型，传入其他值会被 TypeScript 拒绝。默认值为default，即文档中 32px 的中间档。

模板中的双向类绑定

尺寸的实现完全落在组件模板上。整个组件外壳分为「输入区」和「标签区」两块，nzSize对二者分别施加不同类名，见 cron-expression.component.ts：

<div class="ant-input ant-cron-expression-input-group" [class]="statusClasses()" [class.ant-input-lg]="nzSize === 'large'" [class.ant-input-sm]="nzSize === 'small'" [class.ant-input-borderless]="nzBorderless" [class.ant-input-focused]="focus" [class.ant-input-disabled]="nzDisabled" > @for (label of labels; track label) { <nz-cron-expression-input ... /> } </div> <div class="ant-cron-expression-label-group" [class.ant-input-lg]="nzSize === 'large'" [class.ant-cron-expression-label-group-default]="nzSize === 'default'" [class.ant-input-sm]="nzSize === 'small'" > @for (label of labels; track label) { <nz-cron-expression-label [type]="label" [labelFocus]="labelFocus" [locale]="locale" /> } </div>

从源码结构看，映射规则是：

几个值得注意的细节：

1. default 档对输入区是"零类名"实现——不加任何尺寸类，直接继承ant-input基础高度（32px），而large/small才分别叠加ant-input-lg/ant-input-sm。这与 Ant Design 体系内ant-input-lg/ant-input-sm的通用高度令牌共用同一套约定，因此 Cron 表达式输入区的高度天然与同尺寸的普通输入框对齐。
2. 标签区单独区分 default 档。由于标签组（minute / hour / day / month / week 文字行）没有输入框可挂靠，源码为 default 档专门定义了ant-cron-expression-label-group-default类，样式上通过padding: 0 @padding-sm（见 style/index.less）控制其内边距，使标签行在三种尺寸下都能与输入区保持视觉对齐。
3. 输入区内部的input元素本身不关心尺寸。在 style/index.less 中，输入格内部input被设置为width: 100%; border: none; box-shadow: none等裸样式，尺寸完全由外层.ant-input/.ant-input-lg/.ant-input-sm类的高度令牌决定。这意味着只要外层类名正确，各时间粒度输入格（每个占width: 20%）会自动随尺寸缩放。

测试验证：尺寸类名被断言固化

组件的单元测试 cron-expression.spec.ts 中存在专门的用例should nzSize work，直接验证了上表的类名映射：

it('should nzSize work', () => { testComponent.nzSize.set('small'); fixture.detectChanges(); expect(resultEl.nativeElement.querySelector('.ant-cron-expression-input-group').classList).toContain( 'ant-input-sm' ); testComponent.nzSize.set('large'); fixture.detectChanges(); expect(resultEl.nativeElement.querySelector('.ant-cron-expression-input-group').classList).toContain( 'ant-input-lg' ); });

该测试断言：设为small时输入组类名包含ant-input-sm，设为large时包含ant-input-lg。这说明尺寸切换是响应式的——在运行时动态修改nzSize（例如用[nzSize]="currentSize"绑定组件状态）同样会即时更新 DOM 类名，而非仅在首次渲染时生效。

尺寸与其余能力的组合边界

nzSize只影响输入区与标签区的高度/内边距，不影响组件的功能性结构。从模板与源码可以确认：

• 预览区不受 nzSize 直接控制。执行时间预览（nz-cron-expression-preview）的布局由&-preview系列样式（padding: @padding-sm、列表区height: 132px等，见 style/index.less）固定，且可通过nzCollapseDisable整体隐藏；
• nzBorderless、nzDisabled、nzStatus与nzSize正交。它们在模板中是并列的类名绑定（ant-input-borderless、ant-input-disabled、statusClasses()），可以任意组合，例如「无边框的大号输入框」；
• 值校验逻辑与尺寸无关。组件内部用FormBuilder建立 second/minute/hour/day/month/week 六个受控字段，并通过CronExpressionParser.parse（来自cron-parser依赖）做 cron 表达式合法性校验，尺寸切换不会重置或干扰表单状态。

另外需要提醒：nz-cron-expression属于实验性（experimental）组件，组件文档 index.zh-CN.md 标注其依赖第三方包，使用前需先安装：

npm install cron-parser@^5.5.0

小结

围绕「三种大小」这一特性，ng-zorro-antd 的 Cron Expression 组件给出的完整链路是：NzCronExpressionSize三值联合类型约束取值 →nzSize输入属性（默认default）→ 模板按档位切换ant-input-lg/ant-input-sm/ant-cron-expression-label-group-default类名 → 高度呈现为 40px / 32px / 24px → 单元测试对small与large档的类名进行断言固化。若你需要在调度表单中让 Cron 表达式输入区与页面其他输入控件保持同尺寸，只需在同一组控件上保持一致的nzSize取值即可。

• UI组件
• 前端