npm 包 angular2-cron-jobs 使用教程

简介

angular2-cron-jobs 是一个 Angular2+ 的 npm 包,用于生成可视化 cron 表达式的 UI 组件,支持选择分钟、小时、天、星期、月份等多种时间间隔。该组件具有良好的扩展性,可自定义部分显示样式和响应时间间隔。

安装

在 Angular 项目中使用 npm 安装 angular2-cron-jobs:

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

使用

  1. 在 AppModule 中导入 CronJobsModule 以引入组件:

    ------ - -------------- - ---- --------------------- 
    ---
    -----------
      -------- -
        ---
        -------------- -- -- --------------
      --
      ---
    --
    ------ ----- --------- - -
  2. 在 HTML 模板中使用组件:

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

    其中,cronExpression 是初始化 cron 表达式字符串,cronChange 是组件输出事件,用于接收新的 cron 表达式。

  3. 在组件中定义输出事件处理函数:

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

高级用法

自定义样式

通过在组件父元素中设置 cron-jobs 类的样式来自定义组件样式,如更改颜色和边框样式。

自定义时间间隔选择列表

可通过在组件中注入 CronOptionsService 实现自定义时间间隔选择列表。

示例代码:

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

自定义组件绑定值

如果需要将组件绑定到自定义的 cron 表达式变量,可添加双向绑定:

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

总结

angular2-cron-jobs 是一个方便易用的 cron 表达式生成工具,支持多种时间间隔选择和自定义样式和选项。通过本文的介绍,您可以快速上手使用该 npm 包,也可以了解到更多高级用法。希望本文对您有所帮助!

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055fc981e8991b448dd4a5


猜你喜欢

  • npm 包 piyush-cli 使用教程

    介绍 piyush-cli 是一个基于 Node.js 开发的命令行工具,可以快速生成前端项目的基本架构和目录结构,同时支持自定义配置和模板。 在前端项目开发中,我们经常需要创建文件和目录结构,并对其...

    3 年前
  • npm 包 multipleversions 使用教程

    npm 是一个非常流行的 JavaScript 包管理工具,多年来在前端领域被广泛使用。在实际项目中,我们经常需要引入不同版本的 npm 包来兼容不同的环境和需求。

    3 年前
  • npm 包 @cutii/babel-plugin-module-resolver 使用教程

    前言 在前端开发中,我们常常会使用到 npm 包来帮助我们完成项目的开发。在这些 npm 包中,有些包可以帮助我们优化开发流程,提高开发效率,其中就包括 @cutii/babel-plugin-mod...

    3 年前
  • npm 包 firebase-rules-describe 使用教程

    Firebase 是一款由 Google 提供的 NoSQL 数据库和安全认证服务,主要用于建立实时应用。它拥有丰富的功能和易用的 API,以及简便的用户身份验证和实时数据库服务。

    3 年前
  • npm包aws-elasticsearch-helper使用教程

    介绍 在使用AWS Elasticsearch时,我们需要进行一系列的操作才能实现搜索功能,这些操作包括数据导入、查询搜索等功能。aws-elasticsearch-helper是一个npm包,它提供...

    3 年前
  • npm包jamstik-sysex使用教程

    引言 Jamstik-Sysex是一个用于与Jamstik音乐设备通信的npm包,可以简化与Jamstik音乐设备的通信过程并提高开发效率。例如,您可以使用该包与Jamstik控制器和附加设备进行通信...

    3 年前
  • npm 包 redcap 使用教程

    在前端开发中,常常需要从后端获取数据并进行处理展示。此时,我们可以使用 npm 包来简化开发和提高效率。在本篇文章中,我们将介绍如何使用 redcap 这个 npm 包来处理数据。

    3 年前
  • npm 包 node-pixel-tracker 使用教程

    简介 node-pixel-tracker 是一个针对 Node.js 的像素计算机视觉库,它提供了各种像素操作和过滤器功能。在前端开发中,我们经常需要处理图片,包括对图片进行像素运算、滤镜等操作,n...

    3 年前
  • npm 包 @basaltjs/redux-es6 使用教程

    介绍 在前端开发中,Redux 已经成为了用来管理状态的首选框架之一。而 @basaltjs/redux-es6 是一个基于 Redux 的 ES6 绑定工具。它提供了一些非常有用的特性,例如:自动化...

    3 年前
  • npm 包 ppsimple 使用教程

    PPSimple 是一个方便快捷的帮助前端网页实现 PayPal 支付功能模块的 npm 包。在现今电子商务时代,支付功能显得极其重要,而 PayPal 是不可忽略的支付平台之一。

    3 年前
  • npm 包 generator-vue-mpa-package 使用教程

    前言 在前端开发中,我们经常需要使用到一些构建工具来帮助我们快速生成项目结构和代码模板,以提升开发效率。而 generator-vue-mpa-package 就是一款针对 Vue 多页面应用的脚手架...

    3 年前
  • npm 包 negp 使用教程

    negp 是一款轻量级的 Node.js 模块,用于将字符串中的负数转换为正数,非常适用于前端开发中处理数据。本文将详细介绍如何使用 negp 进行负数转换。 安装 negp 我们可以使用 npm 来...

    3 年前
  • npm 包 eslint-plugin-react-ssr 使用教程

    随着 React 服务器渲染的流行,越来越多的前端开发者开始关注 SSR(Server Side Rendering)。React SSR 不仅能加速首屏加载,还可以提高 SEO(Search Eng...

    3 年前
  • npm 包 np-queue 使用教程

    什么是 np-queue np-queue 是一个基于 JavaScript 的简单队列模块。利用 np-queue,您可以很容易地将任务添加到队列中,并在队列空闲时自动处理它们。

    3 年前
  • npm 包 statistics.js 使用教程

    在前端开发中,数据统计是很重要的一环。在统计中,我们需要一种快捷且准确的方法来计算一些特定的指标。npm 包 statistics.js 就是一款很好的选择,它提供了很多常见的数学函数和统计方法,能够...

    3 年前
  • npm 包 lorg 使用教程

    什么是 lorg? lorg 是一个专为 Node.js 和 Web 应用程序设计的轻量级的、高效的、易于使用的日志记录库。通过简单的 API 和灵活的配置,它可以帮助您管理应用程序的日志输出。

    3 年前
  • npm 包 ttop 使用教程

    什么是 ttop ttop 是一个基于 React 的交互式的表格组件,适用于中大型数据的展示。 ttop 具有以下特性: 可以选择不同的排序方式; 可以对单元格进行操作,如复制、粘贴、剪切等; 可...

    3 年前
  • npm 包 karma-helpful-reporter 使用教程

    前言 在前端开发中,我们经常使用自动化测试来保证代码的质量和正确性。而 Karma 是一个流行的测试运行器,可以集成 JavasScript 测试框架并在不同的浏览器环境中运行测试。

    3 年前
  • npm 包 party-names 使用教程

    简介 npm 是世界上最大的软件仓库,其中包含了无数 JS 库和包。在前端开发中,我们经常需要使用这些包来提高开发效率。本文将介绍一个常用的 npm 包 - party-names。

    3 年前
  • npm 包 @noriaki/linebot 使用教程

    线上聊天机器人在现代社会中越发普及,而作为开发者,如何快速地创建一个聊天机器人呢? @noriaki/linebot 是一个 npm 包,可以帮助我们快速创建一个运行在 LINE 平台上的聊天机器人。

    3 年前

相关推荐

    暂无文章