Flipclock on Ionic 2

Question

Flipclock 24-hoursを私のIonic 2アプリケーションに実装しようとしています。 js libraryは、typecriptのIonic 2と互換性があるので、これが機能するかどうかはわかりません。誰でも私を啓発できることを願っています。私はイオン2のFlipclockに関する情報源を見つけることができませんでした。ありがとう。

Answer 1

サードパーティのライブラリをionicに追加するには、ドキュメントをチェックする必要があります。

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

しかし、あなたがして起動することもできます。プラグインの必要があるので、このロジックを保持し、それを使用し、あなたがElementRefが必要になりますパタパタ時計libに作業をするためにするためにコンポーネントを作成後

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

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ファイルにこれを追加：ビルド/ main.js後（その後、あなたのindex.htmlファイルにflipclock.min.jsスクリプトを追加

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

：これを追加package.jsonで

// 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}}' 
    } 
} 

スクリプト）：

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