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 ファイルに次のコードを追加します:

5.zTree の例

zTree の初期化コードを見ると、3 つのパラメーターが必要であることがわかります。その最初のパラメーターは です。パラメータは jQuery オブジェクトで、2 番目のパラメータは zTree の設定オブジェクトです。詳細については、zTree の公式ドキュメントで設定できるパラメータを確認してください (http://www.treejs.cn/v3/api)。 .php)、章 3 つのパラメーターは、zTree ノードのデータを生成するために使用されます

ここでは、zTree のデモ コードを直接使用し、demo.component.ts ファイルに直接コピーします。上記のコードでは、 $.fn.zTree($("#ztree"),this.setting,this.zNodes); ここでは jQuery の ID セレクターを使用し、ztree の ID を持つ ul 要素を追加する必要があります。テンプレートファイルdemo.component.html

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($);}

}

これがulである理由については、zTreeのドキュメントを読んで、この時点に到達した後、他の要素を試して実装できるかどうかを確認することもできます。

関連する推奨事項:

Angular2 は WeChat を模倣して 9 つの画像のアップロードとプレビューの共有を実装します

angular2 ルーティング遷移アニメーションの例の説明

angular2 でノードを取得する方法

以上がAngular2 に他のプラグインを統合する方法の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。