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

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

组件效果

变量

组件countdown.HTML代码

组件countdown.scss代码

组件countdown.component.ts代码

<div class="jb51code">
<pre class="brush:java;">
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);
}
}
}