Exemples détaillés de méthodes d'intégration d'autres plug-ins dans Angular2

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 correspondante d'angular2. expliquez comment intégrer un 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. Cet article analyse principalement en détail comment Angular2 intègre d'autres plug-ins. Les amis intéressés peuvent en tirer des leçons.

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

}

Après avoir ajouté le code ci-dessus, 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);"En regardant la console, vous trouverez le résultat suivant : Dans le contenu de sortie, 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 passons Looking. dans le code d'initialisation de zTree, 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 de zTree. Pour plus de détails, vous pouvez consulter la documentation officielle de zTree pour voir quels paramètres. peut être défini ( 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 on copie directement le code de la démo. dans zTree vers la démo. Dans le fichier composant.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);
 }

}

Regardez le code ci-dessus, $.fn.zTree($("#ztree"), this.setting,this.zNodes); Ici, 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>

Pour savoir pourquoi il s'agit de ul, vous pouvez lire la documentation de zTree. Bien sûr, vous pouvez également essayer d'autres éléments pour voir s'il peut être implémenté. Après avoir atteint ce point, zTree sera intégré par nous. 🎜>

Recommandations associées :

Angular2 imite WeChat pour implémenter 9 exemples de téléchargement d'images et de partage d'exemples d'aperçu

Explication de l'exemple d'animation de transition de routage angulaire2

Comment obtenir des nœuds dans angulaire2

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!