简介
angular2-cron-jobs 是一个 Angular2+ 的 npm 包,用于生成可视化 cron 表达式的 UI 组件,支持选择分钟、小时、天、星期、月份等多种时间间隔。该组件具有良好的扩展性,可自定义部分显示样式和响应时间间隔。
安装
在 Angular 项目中使用 npm 安装 angular2-cron-jobs:
--- ------- ------------------ ------
使用
在 AppModule 中导入 CronJobsModule 以引入组件:
------ - -------------- - ---- --------------------- --- ----------- -------- - --- -------------- -- -- -------------- -- --- -- ------ ----- --------- - -
在 HTML 模板中使用组件:
---- ------------------ ---------- --------------------------------- ------------------------------------ ------------ ------
其中,
cronExpression
是初始化 cron 表达式字符串,cronChange
是组件输出事件,用于接收新的 cron 表达式。在组件中定义输出事件处理函数:
---------------------------- ------- - -- ---- -------------- -
高级用法
自定义样式
通过在组件父元素中设置 cron-jobs
类的样式来自定义组件样式,如更改颜色和边框样式。
自定义时间间隔选择列表
可通过在组件中注入 CronOptionsService
实现自定义时间间隔选择列表。
示例代码:
------ - ------------------ - ---- --------------------- --- ------ ----- ----------- - ------------------- --------------- ------------------- - --------------------------- - ------ -- - ---- ------ ---- - - - -- -- - ------ ------------- ------ -- - ---- - -- - --- - -
自定义组件绑定值
如果需要将组件绑定到自定义的 cron 表达式变量,可添加双向绑定:
---- ------------------ ---------- ------------------------------------------- ------
总结
angular2-cron-jobs 是一个方便易用的 cron 表达式生成工具,支持多种时间间隔选择和自定义样式和选项。通过本文的介绍,您可以快速上手使用该 npm 包,也可以了解到更多高级用法。希望本文对您有所帮助!
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055fc981e8991b448dd4a5