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>