Angular5 でサードパーティの JS プラグインを呼び出す方法 (詳細なチュートリアル)

以下に、Angular5 でサードパーティの JS プラグインを呼び出す方法に関する記事を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

早速、本題に入りましょう。サードパーティのプラグインを参照する最も一般的な方法が 3 つあります。例として、jquery プラグインと、JQuery に基づく 2 つのプラグインを取り上げます。 。

1. 最初の方法: .angular-cli.json ファイルで

を構成する 手順:

1. プロジェクトの .angular-cli.json ファイルでスクリプトを見つけます。ルート ディレクトリ フィールドに、配列内で参照されるすべての js ファイルを追加します (順序に注意してください)

"scripts": ["assets/jquery-3.2.1.js","assets/jquery.nicescroll.js","assets/ion.rangeSlider.js"],

2. プラグインを使用する必要があるコンポーネントで次のステートメントを作成します (.ts 内)。 file):declare var $: any;

目的はコンパイルエラーを防ぐことです

3. 次に、上記の 3 つのプラグインを ngOnInit メソッドで通常どおりに使用できます。

2. 2 番目の方法: Index.html ページでプラグインを参照します

手順:

1. 次の参照をルートのindex.html ページに追加します。ディレクトリ:

<script type="text/javascript" src="assets/jquery-3.2.1.js"></script> 
<script type="text/javascript" src="assets/jquery.nicescroll.js"></script>

2. プラグインを使用する必要があるコンポーネント (.ts ファイル内) で次のステートメントを作成します。コンパイル中にエラーが発生しました

3. 次に、上記の 3 つのプラグインを ngOnInit メソッドで通常どおりに使用できます

3. プラグインを特定のコンポーネントにインポートします

手順:

1. プラグインを使用する必要がある ts ファイルに次の参照を追加します。

import "assets/jquery-3.2.1.js"; 
import "assets/jquery.nicescroll.js"; 
import "assets/ion.rangeSlider.js";

2. プラグインを使用する必要があるコンポーネントに次のステートメントを作成します。 .ts ファイル): var $:any;

その目的は、コンパイルエラーを防ぐことです

3. 次に、上記の 3 つのプラグインを ngOnInit メソッドで使用できます。最初の 2 つの方法ではサービスを再起動する必要があります (私は ngserve を使用していましたが、3 番目の方法は再起動しないと機能しません)。サービスを再起動する必要がなく、効果を直接確認できます。

上記は私があなたのためにまとめたものです。 関連記事:

JsChartコンポーネントの使い方と機能を詳しく紹介

ionic2で自動ジェネレーターを使う手順は？

AjaxUpLoad.jsを介したファイルアップロードのコード例(詳細なチュートリアル)

以上がAngular5 でサードパーティの JS プラグインを呼び出す方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。