在前端开发中，我们常常需要用到计时器来实现各种功能，比如倒计时、定时任务等。而 Angular 框架提供了一个方便易用的计时器组件——angular-timer。
安装与引入
使用 npm 安装 angular-timer：
npm install angular-timer
然后，在你的模块中引入 CountdownTimerModule：
import { NgModule } from '@angular/core'; import { CountdownTimerModule } from 'angular-timer'; @NgModule({ imports: [CountdownTimerModule], }) export class AppModule {}
基本用法
在模板中使用 countdownTimer 组件来创建一个计时器：
<countdown-timer [time]="10" (event)="onEvent($event)"></countdown-timer>
上面的代码会显示一个倒计时，从 10 秒开始，每秒钟减少一秒，直到计时器结束。当计时器结束时，会触发 (event) 事件，你可以在组件中监听该事件来执行相应的操作。
配置项
countdownTimer 组件支持多种配置项，可以通过输入属性来设置这些配置项。以下是一些常用的配置项及其说明：
time: 计时器的初始时间，单位为秒，默认值为0。format: 计时器的显示格式，支持多种格式，比如hh:mm:ss、mm:ss等，默认值为mm:ss。demand: 计时器是否要求精确到毫秒级别，默认为false。interval: 计时器的更新间隔，单位为毫秒，默认为1000。
示例代码
下面是一个完整的示例，演示如何使用 countdownTimer 组件创建一个倒计时：
<countdown-timer [time]="60" format="mm:ss" (event)="onEvent($event)"></countdown-timer>
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - -------------- - ---- ---------------- ------------ --------- ---------------- --------- - ------------ ------- -------- -------- -- -- ------ ----- ------------------ - -------- - --- -------------- --------------- - -- ------------- --- ------- - ------------- - ------- - ---- - ------------- - ----------- - - -展开代码
上面的代码会创建一个从 60 秒开始的倒计时，每秒钟更新一次显示。当计时器结束时，页面上会显示“时间到！”的提示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35734
