介绍
ng2-timeout 是一个 Angular 2 及以上版本的 npm 包，用于实现倒计时功能，可以在项目中用于显示倒计时、定时执行任务等功能。ng2-timeout 具有高度可定制的特性，可以通过配置选项精确控制倒计时的计数方式和输出文本。
安装
可以使用 npm 直接下载 ng2-timeout：
npm install ng2-timeout --save
使用
- 导入 ng2-timeout 包：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------- - ---- --------------
------ - ------------ - ---- ------------------
-----------
-------- -
--------------
----------------
--
------------- ---------------
---------- --------------
--
------ ----- --------- - -- 在组件模板中使用：
<ng2-timeout [endTime]="endTime"
[interval]="interval"
[format]="format"
(timedOut)="onTimeout()"></ng2-timeout>支持以下属性：
endTime：Number 类型，表示倒计时截止时间，默认为当前时间；interval：Number 类型，表示计数器计数间隔时间，默认为 1000ms；format：String 类型，表示输出的文本格式，默认为 hh:mm:ss；timedOut：timedOut 事件，当倒计时结束触发该事件。
配置选项
ng2-timeout 的内部实现是使用 rxjs Observable 对象来实现计时器，因此可以使用 Observable 的相关操作符来精确控制倒计时的计数方式和输出文本。
以下是一些常用的选项：
1. interval
修改倒计时的计数间隔时间，例如计数每 500ms：
<ng2-timeout [endTime]="endTime"
[interval]="500"
[format]="format"
(timedOut)="onTimeout()"></ng2-timeout>2. format
自定义输出文本格式，例如计数器输出示例：
-- -------------------- ---- -------
------------ -------------------
---------------------
--------------------- -- -
--- ----- - -------------------- - ------
--- ------- - --------------------- - ----- - ----
--- ------- - --------- - ---
------ ----- - ---- - ------- - --- - ------- - ----
--
---------------------------------------3. takeUntil
使用 takeUntil 操作符来结束计时器，例如计数 10 秒后停止：
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - -------- ----- - ---- -------
------ - --------- - ---- -----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- --------- -
------- ------------ ------------ - --- ----------
------ ---------------- - ---
------------- -
-------- -----
----------------------------------
------------- -- -
-- ---------------------- --- -- -
------------------------
----------------------------
- ---- -
------------------------
-
---
-
------------- -
------------------------
----------------------------
-
-参考示例代码
完整的计时器示例代码如下：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------------
--------- ----------------
--------- -
------------
------------ -------------------
---------------------
-----------------
---------------------------------------
-
--
------ ----- ------------------ ---------- ------ -
------ -------- -----
------ -------- - -----
------ ------ - -----------
---------- -
------------ - --- --------------- - -- - -- - ------
-
----------- -
---------------
-
-总结
ng2-timeout 提供了强大的可定制性，可以非常方便地实现倒计时功能，并且可以通过配置选项精确控制计时器计数方式和输出文本。希望这篇文章能够帮助你在项目中成功使用 ng2-timeout。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556c581e8991b448d397f