UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载在 ng-zorro-antd 的nz-cron-expressionCron 表达式表单组件中nzCollapseDisable用于隐藏组件右侧的“下次执行时间”折叠预览面板。读完本篇你将掌握该属性的正确用法、它在组件模板与预览子组件中的真实实现链路以及如何结合完整 API 表和 cron 支持格式在表单场景中裁剪出更紧凑的 Cron 输入控件。快速上手用 nzCollapseDisable 隐藏折叠面板官方示例demo/collapse.md给出的说明非常直接可以通过nzCollapseDisable隐藏折叠面板。对应的完整可运行示例见 demo/collapse.tsimport { Component } from angular/core; import { NzCronExpressionModule } from ng-zorro-antd/cron-expression; Component({ selector: nz-demo-cron-expression-collapse, imports: [NzCronExpressionModule], template: nz-cron-expression [nzCollapseDisable]true / }) export class NzDemoCronExpressionCollapseComponent {}使用前需先安装依赖cron-parser组件内部用它解析表达式并计算下次执行时间npm install cron-parser^5.5.0默认情况下nzCollapseDisable为false组件除了五个/六个时间字段输入框外还会渲染一块可展开、收起的预览面板显示下一次执行时间以及后续多条执行时间列表。将其设为true后这块面板整体从 DOM 中移除控件退化为纯输入区适合在空间有限的表单里使用。源码解析nzCollapseDisable 是如何生效的输入声明booleanAttribute 转换在 cron-expression.component.ts 中该属性声明为Input({ transform: booleanAttribute }) nzCollapseDisable: boolean false;默认值为false即默认显示折叠面板使用了 Angular 的booleanAttribute转换因此在模板中写nz-cron-expression nzCollapseDisable /无值或[nzCollapseDisable]true都会被正确解析为true写[nzCollapseDisable]false则为false不存在字符串true/false误判问题。模板条件渲染直接移除 nz-cron-expression-preview在主组件模板中cron-expression.component.ts属性直接控制预览组件的条件渲染if (!nzCollapseDisable) { nz-cron-expression-preview [TimeList]nextTimeList [visible]form.valid [locale]locale [nzSemantic]nzSemantic (loadMorePreview)loadMorePreview() / }也就是说nzCollapseDisable并不是通过 CSS 隐藏面板而是通过if结构指令把nz-cron-expression-preview整体不渲染——此时预览列表数据nextTimeList仍在组件内计算但不会进入 DOM。预览面板本身折叠、加载更多与语义化模板被隐藏的nz-cron-expression-preview是独立的子组件实现见 cron-expression-preview.component.ts收起状态isExpand true仅显示第一次执行时间TimeList[0]经date: yyyy-MM-dd HH:mm:ss格式化表单无效时显示国际化文案locale.cronError展开状态显示完整的时间列表并提供···链接向上触发loadMorePreview事件追加加载 5 条时间提供了nzSemantic模板入口允许自定义渲染“下次执行时间”区域这也是主组件 API 表中nzSemantic的落点右上角down/up图标用于切换展开与收起。理解了这套结构后就不难看出nzCollapseDisable隐藏的是“整个折叠预览区域”而[nzSemantic]只是自定义预览区域内的一块内容——若目标是彻底去掉预览区应使用nzCollapseDisable。测试用例的验证方式行为在测试中被明确断言见 cron-expression.spec.tsit(should nzCollapseDisable work, () { fixture.detectChanges(); expect(resultEl.nativeElement.querySelector(nz-cron-expression-preview)).not.toBeNull(); testComponent.nzCollapseDisable.set(true); fixture.detectChanges(); expect(resultEl.nativeElement.querySelector(nz-cron-expression-preview)).toBeNull(); });即默认时nz-cron-expression-preview存在设置为true并刷新视图后从 DOM 中消失。完整 API 参考nz-cron-expression结合 文档nz-cron-expression的完整参数如下nzCollapseDisable与其余参数可自由组合参数说明类型默认值版本[nzType]cron 规则类型linuxspringlinux-[nzSize]设置输入框大小largesmalldefaultdefault-[nzDisabled]禁用booleanfalse-[nzBorderless]是否隐藏边框booleanfalse-[nzStatus]设置校验状态errorwarning-22.1.0[nzCollapseDisable]隐藏折叠面板booleanfalse-[nzExtra]自定义渲染右侧的内容TemplateRefvoid--[nzSemantic]自定义渲染下次执行时间TemplateRefvoid--几点来自源码的补充说明cron-expression.component.ts组件实现了ControlValueAccessor与Validator并注册了NG_VALUE_ACCESSOR、NG_VALIDATORS见 cron-expression.module.ts 的导出与 public-api.ts因此可以配合formControl使用表单值变化时通过CronExpressionParser.parse校验合法性并触发onChange内部使用FormBuilder建立second / minute / hour / day / month / week六个必填字段nzType spring时启用second字段linux类型下禁用对应地labels分别为 6 个与 5 个见labelsOfType与cronFormType方法nzStatus支持继承NzFormStatusService的表单状态当内部表单为INVALID时优先展示error状态样式。支持的 cron 格式组件支持的标准 cron 格式见 文档* * * * * * ┬ ┬ ┬ ┬ ┬ ┬ │ │ │ │ │ | │ │ │ │ │ └ day of week (0 - 7, 1L - 7L) (0 or 7 is Sun) │ │ │ │ └───── month (1 - 12) │ │ │ └────────── day of month (1 - 31, L) │ │ └─────────────── hour (0 - 23) │ └──────────────────── minute (0 - 59) └───────────────────────── second (0 - 59, optional)适用前提与限制秒位为可选项linux类型下组件只渲染 5 个输入框spring类型下渲染 6 个含秒解析与“下次执行时间”预览依赖cron-parser^5.5.0安装后方可完整使用表达式无效时visible为false预览区若未隐藏会显示国际化错误文案而非时间列表。小结nzCollapseDisable是nz-cron-expression的布尔型输入默认false设为true时组件模板中的if (!nzCollapseDisable)分支不渲染nz-cron-expression-preview从而在 DOM 层面彻底移除折叠预览面板。它适合在空间紧张或业务上已自行展示执行时间的场景中把控件精简为纯 Cron 输入表单。更多演示基本用法、无边框、尺寸、状态等可参考 demo 目录。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐从源码到部署CrowdStrike CRT内部工作原理与自定义扩展终极指南从源码到部署CrowdStrike CRT内部工作原理与自定义扩展终极指南 CrowdStrike CRTCrowdStrike Reporting Too终极指南如何高效使用ng-zorro-antd组件库GitHub Issue模板终极指南如何高效使用ng zorro antd组件库GitHub Issue模板 ng zorro antd是基于Ant Design规范开发的AngularUI组件前端NG-ZORRO/ng-zorro-antd 主题定制完全指南NG ZORRO/ng zorro antd 主题定制完全指南 前言 NG ZORROAnt Design of Angular作为企业级UI组件库提供了UI组件前端上一篇OrcaSlicer 网络打印指南Klipper/PrusaLink/OctoPrint 无缝集成方案下一篇告别电影收藏混乱用Radarr打造导演剪辑版完整解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考