feat: start the counter on demand, close #9

example:

<countdown #cd2 [config]="{leftTime: 30, demand: false}"></countdown>

<button (click)="cd2.begin()" class="btn btn-link btn-sm">begin</button>

README.md

@@ -48,6 +48,7 @@ export class AppModule { }
 | Name    | Type           | Default  | Summary |
 | ------- | ------------- | ----- | ----- |
 | `config` | Config | - | see Config |
+| `begin()` | - | - | Triggers when `{demand: false}` |
 | `restart()` | - | - | - |
 | `stop()` | - | - | - |
 | `pause()` | - | - | - |
@@ -75,6 +76,7 @@ resetTimer(){
 
 | Name    | Type           | Default  | Summary |
 | ------- | ------------- | ----- | ----- |
+| demand | boolean | `false` | 按需启动，需调用 `begin()` 开始启动  |
 | template | string | $!h!时$!m!分$!s!秒 | 自定义模板，如果为空以组件 innerHTML 为准，再不然使用默认值。`$!s!` 有另一种表示法 `$!s-ext!` 表示0.1s精度。  |
 | size | string | lite | lite、medium、large 三种不同风格，见DEMO |
 | leftTime | number | 0 | 剩余时间：指的是根据服务端计算剩余时间值进行倒计时，支持0.1s精度，但有可能会出现丢帧的情况。（单位：秒） |

demo/src/app/components/demo.component.html

@@ -97,7 +97,23 @@
 <div class="row">
     <div class="col-sm-4 mb-3">
         <div class="card text-center">
-            <div class="card-header">基础效果</div>
+            <div class="card-header">非立即开始</div>
+            <div class="card-body">
+                <div class="mb-3">
+                    <countdown #cd2 [config]="{leftTime: 30, demand: true}"></countdown>
+                    <div>
+                        <button (click)="cd2.begin()" class="btn btn-link btn-sm">begin</button>
+                    </div>
+                </div>
+                <textarea highlight-js>
+                    &lt;countdown [config]="{leftTime: 30, demand: true}"></countdown>
+                </textarea>
+            </div>
+        </div>
+    </div>
+    <div class="col-sm-4 mb-3">
+        <div class="card text-center">
+            <div class="card-header">动作</div>
             <div class="card-body">
                 <div class="mb-3">
                     <countdown #cd1 (event)="onEvent($event)" [config]="{leftTime: 30}"></countdown>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-countdown",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "main": "./bundles/ngx-countdown.umd.js",
   "typings": "index.d.ts",
   "description": "Simple, easy and performance countdown for angular",

src/components/component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewEncapsulation, Input, Renderer, OnChanges, SimpleChanges, OnDestroy, Output, EventEmitter, HostBinding, OnInit } from '@angular/core';
+import { Component, ElementRef, ViewEncapsulation, Input, Renderer, OnChanges, SimpleChanges, OnDestroy, Output, EventEmitter, HostBinding, OnInit, SimpleChange } from '@angular/core';
 import { Config } from './interfaces/config';
 import { Hand } from './interfaces/hand';
 import { Timer } from './timer';
@@ -34,20 +34,27 @@ export class CountdownComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     ngOnInit() {
+        this.mergeConfig();
         this.init();
-        this.callEvent('start');
+        if (!this.config.demand) this.begin();
     }
 
     ngOnDestroy(): void {
         this.destroy();
     }
 
-    ngOnChanges(changes: SimpleChanges): void {
+    ngOnChanges(changes: { [P in keyof this]?: SimpleChange } & SimpleChanges): void {
         if (!changes.config.firstChange) {
+            this.mergeConfig();
             this.destroy().init();
         }
     }
 
+    begin() {
+        this.parsed = false;
+        this.callEvent('start');
+    }
+
     restart(): void  {
         if (!this.stoped) this.destroy();
         this.init();
@@ -74,25 +81,28 @@ export class CountdownComponent implements OnInit, OnChanges, OnDestroy {
         this.callEvent('resume');
     }
 
+    private mergeConfig() {
+        this.config = Object.assign(<Config>{
+            demand: false,
+            leftTime: 0,
+            template: '$!h!时$!m!分$!s!秒',
+            size: 'lite',
+            effect: 'normal',
+            varRegular: /\$\!([\-\w]+)\!/g,
+            clock: ['d', 100, 2, 'h', 24, 2, 'm', 60, 2, 's', 60, 2, 'u', 10, 1]
+        }, this.config);
+    }
+
     private callEvent(action: string) {
         this.event.emit({ action, left: this.left });
     }
 
     private init() {
         const me = this;
         const el = me.el.nativeElement;
-        me.parsed = false;
+        me.parsed = me.config.demand;
         me.stoped = false;
 
-        me.config = Object.assign(<Config>{
-            leftTime: 0,
-            template: '$!h!时$!m!分$!s!秒',
-            size: 'lite',
-            effect: 'normal',
-            varRegular: /\$\!([\-\w]+)\!/g,
-            clock: ['d', 100, 2, 'h', 24, 2, 'm', 60, 2, 's', 60, 2, 'u', 10, 1]
-        }, me.config);
-
         this.cls = `count-down ${me.config.size} ${me.config.className || ''}`;
 
         // 分析markup
@@ -139,7 +149,7 @@ export class CountdownComponent implements OnInit, OnChanges, OnDestroy {
         });
 
         me.getLeft();
-        me.reflow();
+        me.reflow(0, true);
 
         // bind reflow to me
         const _reflow = me.reflow;
@@ -173,8 +183,8 @@ export class CountdownComponent implements OnInit, OnChanges, OnDestroy {
     /**
      * 更新时钟
      */
-    private reflow(count: number = 0): void {
-        if (this.parsed || this.stoped) return ;
+    private reflow(count: number = 0, force: boolean = false): void {
+        if (!force && (this.parsed || this.stoped)) return ;
         const me = this;
         me.left = me.left - me.frequency * count;
 

src/components/interfaces/config.ts

@@ -7,6 +7,11 @@ export interface Config {
      */
     template?: string;
 
+    /**
+     * 按需启动，需调用 `begin()` 开始启动，默认：`false`
+     */
+    demand?: boolean;
+
     /**
      * 尺寸
      *