Ionic 2上的Flipclock

Question

我正試圖在我的Ionic 2應用程序中實現Flipclock 24-hours。我不確定這是否可以工作，因爲js library與打字稿中的Ionic 2兼容。希望任何人都可以啓發我，因爲我無法找到有關Flonicclock在Ionic 2中的任何消息。謝謝。

Answer 1

您應該檢查文檔以添加第三方庫到離子。

https://ionicframework.com/docs/developer-resources/third-party-libs/

但你可以這樣開始：

npm install jquery --save 
npm install @types/jquery --save 
npm install flipclock --save 

然後創建一個組件支撐這個邏輯並使用它，使FlipClock LIB工作，你將需要ElementRef，因爲插件需求HTMLElement創建時鐘。

所以，你有這樣的事情：

import { Component, ElementRef, OnInit } from '@angular/core'; 
import * as $ from 'jquery' 

@Component({ 
    selector: 'my-clock', 
    template: '' 
}) 
export class MyClockComponent implements OnInit { 

    constructor(public elementRef: ElementRef) {} 

    ngOnInit() { 
     // If you have TS issues here add a cast like (<any>$(this.elementRef).FlipClock 
     $(this.elementRef).FlipClock({ 
     clockFace: 'TwentyFourHourClock' 
    }); 
    } 
} 

這應該做的工作。

更新：

添加自定義副本的配置，以確保您的第三方的lib會在運行時可用。

• 在項目中創建一個config文件夾。
• 在 config文件夾中創建一個名爲copy.config.js的文件夾。

添加到您的copy.config.js文件：

// this is a custom dictionary to make it easy to extend/override 
// provide a name for an entry, it can be anything such as 'copyAssets' or 'copyFonts' 
// then provide an object with a `src` array of globs and a `dest` string 
module.exports = { 
    copyAssets: { 
    src: ['{{SRC}}/assets/**/*'], 
    dest: '{{WWW}}/assets' 
    }, 
    copyIndexContent: { 
    src: ['{{SRC}}/index.html', '{{SRC}}/manifest.json', '{{SRC}}/service-worker.js'], 
    dest: '{{WWW}}' 
    }, 
    copyFonts: { 
    src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*'], 
    dest: '{{WWW}}/assets/fonts' 
    }, 
    copyPolyfills: { 
    src: [`{{ROOT}}/node_modules/ionic-angular/polyfills/${process.env.IONIC_POLYFILL_FILE_NAME}`, 
      `{{ROOT}}/node_modules/flipclock/compiled/flipclock.min.js`], 
    dest: '{{BUILD}}' 
    }, 
    copySwToolbox: { 
    src: ['{{ROOT}}/node_modules/sw-toolbox/sw-toolbox.js'], 
    dest: '{{BUILD}}' 
    } 
} 

在你package.json補充一點：

"config": { 
    "ionic_copy": "./config/copy.config.js" 
} 

的flipclock.min.js腳本然後添加到您的index.html文件（您構建/ main.js後腳本）：

<script src="build/flipclock.min.js"></script>