Ionic 2 上的翻转时钟答案

【问题标题】：Flipclock on Ionic 2Ionic 2 上的翻转时钟
【发布时间】：2017-08-09 16:39:10
【问题描述】：

我正在尝试在我的 Ionic 2 应用程序中实现 Flipclock 24-hours。我不确定这是否可行，因为js library 与打字稿中的 Ionic 2 兼容。希望有人能启发我，因为我在 Ionic 2 中找不到任何有关 Flipclock 的资源。谢谢。

【问题讨论】：

标签： javascript angular typescript ionic2 flipclock

【解决方案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>

【讨论】：

感谢您的回答。似乎 ionic 无法检测到任何名为“FlipClock”的模块，因此在 .FlipClock 处提示错误。上述导入步骤无效。
试试(<any>$(this.elementRef)).FlipClock 告诉我是否可行。
我认为相当于 window.在离子 1 中？语法错误消失了，我收到以下错误消息：``` Uncaught (in promise): Error: Cannot find module "Flipclock" Error: Cannot find module "Flipclock" at Object. ``` 认为模块去了即使在 npm install 之后也丢失了。
是的，我会更新答案，将 JQuery 和 FlipClock 添加到构建复制挂钩中。
好的，感谢您的帮助。我认为 jQuery 模块没有问题。只有 Flipclock 有一些导入问题 atm。