Comment intégrer des plug-ins à l'aide d'Angular2 (tutoriel détaillé)

Cet article vous donne une analyse détaillée de la façon dont Angular2 intègre d'autres plug-ins. Les amis intéressés peuvent en tirer des leçons.

Préface : De nos jours, lorsque de nombreux amis entrent en contact avec Angular2, ils utiliseront inévitablement d'autres plug-ins tiers, et ces plug-ins peuvent être basés sur jQuery, et il n'y a pas de version angulaire2 correspondante , je vais vous expliquer ici comment intégrer le plug-in jQuery tiers dans ce cas. Nous prenons l'intégration de zTree par Angular2 comme exemple pour illustrer les idées et le processus d'intégration.

Site officiel de zTree : http://www.treejs.cn/v3/main.php#_zTreeInfo

1 Habituellement, lorsque je souhaite intégrer un plug-in comme zTree, je le fais. accédez d'abord directement aux exemples en ligne de zTree, comme cet exemple :

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

Le rendu est comme ceci :

2. Après avoir vu cet effet, regardons le code de cet exemple : Le code clé est ici :

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

JQuery est utilisé dans ce code, non ? Si on veut intégrer zTree, il faut d'abord introduire jQuery. Alors ne nous soucions pas de la façon d'intégrer zTree. Résolvons d'abord le problème de l'introduction de jQuery :

3. Introduisez jQuery dans le projet angulaire2. Bien sûr, vous pouvez l'ignorer si vous utilisez le plug-in. l'utilisation ne dépend pas de jQuery, mais généralement les plug-ins tiers en dépendent, n'est-ce pas. L'introduction de jQuery est relativement simple, il suffit de l'introduire dans le fichier index.html :

est introduit, nous devons tester si jQuery est introduit avec succès. Nous utilisons la commande ng g c demo pour générer un composant permettant de tester si jQuery est introduit avec succès :

 Vous verrez qu'angular-cli a généré les fichiers nécessaires pour nous, puis nous ouvrons le fichier demo.component.ts et ajoutons le contenu suivant après l'instruction d'importation :

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

}

Une fois le code ci-dessus ajouté, vérifiez la sortie de la console du navigateur :

, vous constaterez que la sortie est l'objet jquery $ que nous utilisons habituellement. À ce stade, nous avons introduit avec succès jQuery dans le projet.

4. Introduisez la bibliothèque js et la bibliothèque css de zTree dans le projet. Dans le fichier index.html, nous ajoutons le code suivant :

"Après cela, nous pouvons tester si zTree est introduit normalement. Nous ajoutons le code suivant à la méthode ngOnInit dans le fichier demo.component.ts : "console.log($.fn. zTree). );" Vérifiez la console et vous trouverez la sortie suivante : dans la sortie D'après le contenu, nous pouvons voir qu'il existe une méthode init utilisée par zTree pour s'initialiser, afin que nous puissions réellement écrire un exemple de zTree

Exemple 5.zTree

Nous regardons zTree Quand. vous initialisez le code, vous constaterez qu'il nécessite 3 paramètres. Le premier paramètre est un objet jQuery et le deuxième paramètre est l'objet de configuration zTree. Pour plus de détails, vous pouvez consulter la documentation officielle de zTree pour voir quels paramètres peuvent être définis. (http://www.treejs.cn/v3/api.php), le troisième paramètre est utilisé pour générer les données du nœud zTree

Ici, nous utilisons directement le code de démonstration dans zTree et le copions directement vers demo.component.ts. Dans le fichier :

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

}

Regardez le code ci-dessus, $.fn.zTree($("#ztree"),this.setting,this.zNodes); nous utilisons le sélecteur d'identifiant de jQuery, nous devons ensuite ajouter un élément ul avec l'identifiant de ztree dans le fichier modèle demo.component.html

<ul id="ztree"><ul>

Quant à savoir pourquoi il s'agit de ul, vous pouvez voir la documentation de zTree . Bien sûr, vous pouvez également essayer d'autres éléments, voir si cela peut être réalisé

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir. >Articles associés :

Comment utiliser WeChat. Utiliser js pour invoquer l'application

Comment utiliser le module http dans node.js ? les commandes de débogage Javascript ?

Interprétation détaillée du système de fichiers et du flux dans nodeJs

Quels sont les scénarios d'application des sous-processus dans Node.js

À propos du module child_process dans node (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!