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

> ;「この後、zTree が正常に導入されているかどうかをテストできます。demo.component.ts ファイルの ngOnInit メソッドに次のコードを追加します: "console.log($.fn.zTree);" コンソールを確認してください。次の出力が見つかります:  出力内容には、次があることがわかります。 zTree 初期化には init メソッドが使用されるため、実際に zTree の例を作成できます

5.zTree の例

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

ここでは、zTree のデモ コードを直接使用し、demo.component.ts ファイルに直接コピーします。

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 {
setting = {
  data: {
   simpleData: {
    enable: true
   }
  }
 };
 zNodes = [
  { id: 1, pId: 0, name: "父节点1 - 展开", open: true },
  { id: 11, pId: 1, name: "父节点11 - 折叠" },
  { id: 111, pId: 11, name: "叶子节点111" },
  { id: 112, pId: 11, name: "叶子节点112" },
  { id: 113, pId: 11, name: "叶子节点113" },
  { id: 114, pId: 11, name: "叶子节点114" },
  { id: 12, pId: 1, name: "父节点12 - 折叠" },
  { id: 121, pId: 12, name: "叶子节点121" },
  { id: 122, pId: 12, name: "叶子节点122" },
  { id: 123, pId: 12, name: "叶子节点123" },
  { id: 124, pId: 12, name: "叶子节点124" },
  { id: 13, pId: 1, name: "父节点13 - 没有子节点", isParent: true },
  { id: 2, pId: 0, name: "父节点2 - 折叠" },
  { id: 21, pId: 2, name: "父节点21 - 展开", open: true },
  { id: 211, pId: 21, name: "叶子节点211" },
  { id: 212, pId: 21, name: "叶子节点212" },
  { id: 213, pId: 21, name: "叶子节点213" },
  { id: 214, pId: 21, name: "叶子节点214" },
  { id: 22, pId: 2, name: "父节点22 - 折叠" },
  { id: 221, pId: 22, name: "叶子节点221" },
  { id: 222, pId: 22, name: "叶子节点222" },
  { id: 223, pId: 22, name: "叶子节点223" },
  { id: 224, pId: 22, name: "叶子节点224" },
  { id: 23, pId: 2, name: "父节点23 - 折叠" },
  { id: 231, pId: 23, name: "叶子节点231" },
  { id: 232, pId: 23, name: "叶子节点232" },
  { id: 233, pId: 23, name: "叶子节点233" },
  { id: 234, pId: 23, name: "叶子节点234" },
  { id: 3, pId: 0, name: "父节点3 - 没有子节点", isParent: true }
 ];
 constructor() { 
 }
 ngOnInit() {
  $.fn.zTree($("#ztree"),this.setting,this.zNodes);
 }

}

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

<ul id="ztree"><ul>

なぜ ul なのかについては、zTree のドキュメントを読んでください。もちろん、他の要素を試して実装できるかどうかを確認することもできます。

上記は私があなたのためにコンパイルしたものです。

WeChat でアプリを呼び出すために js を使用する方法

Node.js で http モジュールを使用する方法

ファイル システムの詳細な解釈とnodeJsの流れ

Node.jsの子プロセスのアプリケーションシナリオとは何ですか

nodeのchild_processモジュールについて(詳細なチュートリアル)

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