javascript - Ionic 2 上的翻转时钟

Question

我正在尝试在我的 Ionic 2 应用程序中实现Flipclock 24 小时。我不确定这是否可以工作，因为js 库与打字稿中的 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文件夹。
• 在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文件中（在您的 build/main.js 脚本之后）：

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