Angular2 倒计时组件

Angular2倒计时组件

---

由于博客绑定问题，以往博客内容全部丢失，本文为补发之前内容

---

组件需求

1. 父组件传递截止日期
2. 父组件传递标题

---

组件效果

---

组件countdown.html

运用到了模版语法的插值表达式，具体参考angular2中文网：模版语法

<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>

---

组件样式countdonw.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.ts

运用了组件间通信之父向子传递数据，具体参考angular2中文网：组件间通信
生命钩子相关，参考angular2中文网：生命周期钩子

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);
        }
    }
}

---

使用方法header.html

angular2中文网：模版表达式

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