angular2倒计时组件使用详解_AngularJS

项目中遇到倒计时需求，考虑到以后在其他模块也会用到，就自己封装了一个组件。便于以后复用。

组件需求如下：
- 接收父级组件传递截止日期
- 接收父级组件传递标题

组件效果

变量

组件countdown.html代码

<div class="count-down">  <div class="title">    <h4>      {{title}}    </h4>  </div>  <div class="body">    <div class="content">      <div class="top">        {{hour}}      </div>      <div class="bottom">        小时      </div>    </div>    <div class="content">      <div class="top">        {{minute}}      </div>      <div class="bottom">        分钟      </div>    </div>    <div class="content">      <div class="top">        {{second}}      </div>      <div class="bottom">        秒      </div>    </div>  </div></div>

组件countdown.scss代码

.count-down{  width:100%;  height:100px;  background: rgba(0,0,0,0.5);  padding: 2px 0;  .body{    margin-top: 8px;    .content{      width:29%;      float: left;      margin: 0 2%;      .top{        font-size: 20px;;        line-height: 30px;        color: black;        background: white;        border-bottom: 2px solid black;      }      .bottom{        font-size: 14px;        line-height: 20px;        background: grey;      }    }  }}

组件countdown.component.ts代码

import { Component, OnInit, Input, OnDestroy, AfterViewInit } from '@angular/core';@Component({ selector: 'roy-countdown', templateUrl: './countdown.component.html', styleUrls: ['./countdown.component.scss']})export class CountdownComponent implements AfterViewInit, OnDestroy { // 父组件传递截止日期 @Input() endDate: number; // 父组件传递标题 @Input() title: string; // 小时差 private hour: number; // 分钟差 private minute: number; // 秒数差 private second: number; // 时间差 private _diff: number; private get diff() {  return this._diff; } private set diff(val) {  this._diff = Math.floor(val / 1000);  this.hour = Math.floor(this._diff / 3600);  this.minute = Math.floor((this._diff % 3600) / 60);  this.second = (this._diff % 3600) % 60; } // 定时器 private timer; // 每一秒更新时间差 ngAfterViewInit() {  this.timer = setInterval(() => {   this.diff = this.endDate - Date.now();  }, 1000); } // 销毁组件时清除定时器 ngOnDestroy() {  if (this.timer) {   clearInterval(this.timer);  } }}

使用方法demo.html

<roy-countdown title="距离考试还有：" [endDate]="endDate"></roy-countdown>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

angular2倒计时组件使用详解_AngularJS_