npm 包 ngx-cron-editor-br 使用教程

阅读时长 4 分钟读完

简介

ngx-cron-editor-br 是一个使用 Angular 编写的 cron 表达式编辑器。它对标准的 cron 表达式进行了封装,使得用户可以通过 GUI 界面直接编辑出 cron 表达式,同时也提供了一系列的可选项方便用户进行选择。该编辑器可以用于定时任务的管理,如定时执行数据备份、数据清理等。

特性

  • 支持用户手动编辑 cron 表达式
  • 支持以可视化方式选择 cron 表达式参数
  • 支持在时间选择器中进行基于秒的选择
  • 支持设置过期日期和时间 (UTC 模式)
  • 加载速度快,界面简洁易用

安装

该 npm 包可通过以下命令进行安装:

使用

引入

使用 ngx-cron-editor-br,你需要将它引入到你的组件中。我们需要在 app.module.ts 中先导入 ngx-cron-editor-br 包:

接着,在 NgModule 的 imports 数组中将 CronEditorModule 添加进去,像这样:

使用示例

在你的组件中你可以按如下方式使用 ngx-cron-editor-br:

HTML 代码

-- -------------------- ---- -------
-----
  ---- ------------------------------------
  ----------------
    -------------------
    ----------------------------
    ------------------
    ------------------------
  ------------------
------

TypeScript 代码

-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- ------------ ---------- - ---- -----------------
------ - ------------ ---------------- - ---- ---------------------

------------
  --------- -----------
  ------------ -----------------------
  ---------- -----------------------
--
------ ----- ------------ ---------- ------ -

  ------ ---------- ----------
  ------ --------------- -------
  ------ -------- ----------- - -
    --------------- ------------- -------------------
    ---------------- ------------- --------------------
    --------------- --------------------
    ------------------ -----------------------
    -------------- --------
  --

  ---------- -
    ------------------- - -- - - - - ---

    -- ------ ---------
    -------------- - --- -----------
      ------------------ --- -------------------------------- --------------------
    ---
  -
-

在上述的 TypeScript 代码中,我们定义了 cronExpression 字段,这是 ngx-cron-editor-br 指令的 ngModel。同样地,我们需要定义 formGroup 用于表单验证。

结论

ngx-cron-editor-br 是一个优秀的开源 npm 包,它可以让开发人员快速地添加定时任务的管理功能而不需要编写复杂的 cron 表达式。它的可配置性非常高,提供了很多针对表单元素的样式类名,使得使用者可以轻松地自定义样式。如果你的项目需要定时任务管理的功能,考虑使用 ngx-cron-editor-br 将会是个不错的选择。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600668e9d9381d61a3540bbd

纠错
反馈