Angular 2アプリでjQueryプラグインを使用する

Question

Angular 2アプリでjQueryプラグインを使用する方法は？

例：circliful（https://github.com/pguso/jquery-plugin-circliful）。

私が知っているすべては私が私のindex.htmlにjQueryとプラグインの.jsをインポートする必要があることですが、どのように私は（プラグインのドキュメントに示されている）、このようなコードを配置することができます：角度に

<script> 
$(document).ready(function() { 
     $("#your-circle").circliful({ 
     animationStep: 5, 
     foregroundBorderWidth: 5, 
     backgroundBorderWidth: 15, 
     percent: 75 
    }); 
    }); 
</script> 

2アプリ - 私は分かりません！

Answer 1

jqueryを実行するには、javascriptファイルと定義ファイルの両方を使用する必要があります。 javascriptファイルを追加するには、index.htmlに入れてください。定義ファイルを追加する必要はありませんが、TSドメインではjqueryメソッドの自動補完とチェックができるので、良い考えです。 npm、tsdを使用してインストールし、tsdを使用してjquery.d.tsファイルをインストールする必要がある定義ファイル（d.ts）を使用する場合。

Answer 2

jqueryを使用しない方がいいですし、circle progress barのようなディレクティブを使用してください。jqueryプラグインを使用するディレクティブを書くことは可能です。

Thereは角内のディレクティブの3種類がありますが、あなたは以下のコード

import { Directive, ElementRef, HostListener, Input } from '@angular/core'; 
@Directive({ 
    selector: '[circliful]' 
}) 
export class CirclifulDirective { 
    constructor(private el: ElementRef) { 
     $(el).circliful({ 
      animationStep: 5, 
      foregroundBorderWidth: 5, 
      backgroundBorderWidth: 15, 
      percent: 75 
     }); 
    } 
} 

のように、このライブラリを埋め込むために、次にあなたがこのディレクティブを使用することができAttribute directivesを使用する必要があります。