Angular2 を使用してプラグインを統合する方法 (詳細なチュートリアル)

この記事では、Angular2 が他のプラグインをどのように統合するかについて詳しく説明します。興味のある方はそこから学ぶことができます。

前書き: 現在、多くの友人が Angular2 に触れるとき、必然的に他のサードパーティのプラグインを使用することになります。これらのプラグインは jQuery に基づいている可能性があり、Angular2 の対応するバージョンはありません。この場合にサードパーティの jQuery プラグインを統合する方法を説明します。統合のアイデアとプロセスを説明するために、Angular2 による zTree の統合を例として取り上げます。

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 ファイルを開いて、import ステートメントの後に次のコンテンツを追加します。

declare var $ : any;
import { Component, OnInit } from '@angular/core';declare var $ : any;
@Component({selector: 'app-demo',templateUrl: './demo.component.html',styleUrls: ['./demo.component.css']})export class DemoComponent implements OnInit {
constructor() { }
ngOnInit() {console.log($);}

}

上記のコードが追加された後、ブラウザのコンソール出力を確認してください:

 出力が私たちの出力であることがわかります。通常は jquery object $ を使用します。この時点で、プロジェクトに jQuery を導入することに成功しました。

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