Ionic 2 上的 Flipclock

Question

我正在尝试实现 Flipclock 24-hours into my Ionic 2 application. I'm not sure if this could work as the js library 与打字稿中的 Ionic 2 兼容。希望任何人都能启发我，因为我在 Ionic 2 中找不到任何有关 Flipclock 的资源。谢谢。

Answer 1

您应该查看文档以将第三方库添加到 ionic。

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

但你可以从：

开始

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

然后创建一个组件来保存此逻辑并使用它，要使 FlipClock 库正常工作，您需要 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'
    });
   }
}

这应该可以完成工作。

更新:

添加自定义复制配置以确保您的第三方库在运行时可用。

在项目中创建一个 config 文件夹。
在里面创建一个文件名为 copy.config.js.

config

将此添加到您的 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 文件（在您的 build/main.js 脚本之后）：

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

Ionic 2 上的 Flipclock

Flipclock on Ionic 2

javascript

typescript

flipclock

ionic2

angular