Angular2 に他のプラグインを統合する方法の詳細な例

現在、Angular2 に触れる場合、多くの友人は必然的に他のサードパーティのプラグインを使用することになります。これらのプラグインは jQuery に基づいている可能性があり、angular2 には対応するバージョンがありません。この場合にサードパーティの jQuery プラグインを統合する方法。統合のアイデアとプロセスを説明するために、Angular2 による zTree の統合を例として取り上げます。この記事では主に、Angular2 が他のプラグインをどのように統合するかを詳細に分析します。興味のある方はそこから学ぶことができます。

zTree 公式 Web サイト: http://www.treejs.cn/v3/main.php#_zTreeInfo

1. 通常、zTree のようなプラグインを統合したい場合は、まず zTree のオンラインに直接アクセスします。このような例:

https://github.com/zTree/zTree_v3/blob/master/demo/cn/super/metro.html

レンダリングは次のようになります:

2.この効果を見て、この例のコードを見てみましょう: 重要なコードは次のとおりです:

$(document).ready(function(){
      $.fn.zTree.init($("#treeDemo"), setting, zNodes);
 });

このコードでは jQuery が使用されていますね? zTree を統合したい場合は、まず jQuery を導入する必要があります。それでは、zTree をどのように統合するかについて心配する必要はありません。まず、jQuery を導入する方法の問題を解決しましょう。

3. 使用するプラグインが jQuery に依存していない場合は、もちろん、jQuery を導入できます。このステップはスキップしてください。ただし、通常、サードパーティのプラグインはこれに依存しますよね。 jQuery の導入は比較的簡単で、index.html ファイルに導入するだけです:

導入後、 jQuery が正常に導入されたかどうかをテストする必要があります。 ng g c Demon コマンドを使用して、jQuery が正常に導入されたかどうかをテストするコンポーネントを生成します:

 angular-cli が必要なファイルを生成したことがわかります。次に、demo.component.ts ファイルを開いて、インポート ステートメントの後に次のコンテンツを追加します。コードが追加されます。ブラウザのコンソール出力を確認してください:

出力は通常使用する jquery オブジェクト $ です。この時点で、プロジェクトに jQuery を導入することに成功しました。

4. zTree の js ライブラリと css ライブラリをプロジェクトに導入します。index.html ファイルに次のコードを追加します: