So integrieren Sie Plug-Ins mit Angular2 (ausführliches Tutorial)

In diesem Artikel erfahren Sie detailliert, wie Angular2 andere Plug-Ins integriert. Interessierte Freunde können davon lernen.

Vorwort: Wenn heutzutage viele Freunde mit Angular2 in Kontakt kommen, verwenden sie zwangsläufig einige andere Plug-Ins von Drittanbietern. Diese Plug-Ins basieren möglicherweise auf jQuery und es gibt keine entsprechende Angular2-Version Hier erkläre ich, wie man in diesem Fall das jQuery-Plug-in eines Drittanbieters integriert. Wir nehmen die Integration von zTree durch Angular2 als Beispiel, um die Integrationsideen und den Integrationsprozess zu veranschaulichen.

offizielle zTree-Website: http://www.treejs.cn/v3/main.php#_zTreeInfo

1 Im Allgemeinen werde ich ein Plug-in wie zTree integrieren Gehen Sie zuerst direkt zu den Online-Beispielen von zTree, wie zum Beispiel diesem Beispiel:

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

Das Rendering sieht so aus:

2. Nachdem wir diesen Effekt gesehen haben, schauen wir uns den Code dieses Beispiels an: Der Schlüsselcode ist hier:

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

In diesem Code wird JQuery verwendet, oder? Wenn wir zTree integrieren möchten, müssen wir zuerst jQuery einführen. Machen wir uns also keine Gedanken über die Integration von zTree. Lösen wir zunächst das Problem der Einführung von jQuery:

3. Führen Sie jQuery in das Angular2-Projekt ein. Sie können es natürlich überspringen Die Verwendung hängt nicht von jQuery ab, aber im Allgemeinen sind Plug-Ins von Drittanbietern darauf angewiesen, richtig. Die Einführung von jQuery ist relativ einfach. Fügen Sie es einfach in die Datei index.html ein:

eingeführt wird, müssen wir testen, ob jQuery erfolgreich eingeführt wurde. Wir verwenden den Befehl ng g c demo, um eine Komponente zu generieren, um zu testen, ob jQuery erfolgreich eingeführt wurde:

 Sie werden sehen, dass angle-cli die notwendigen Dateien für uns generiert hat, dann öffnen wir die Datei demo.component.ts und fügen nach der Importanweisung den folgenden Inhalt hinzu:

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

}

Der obige Code Überprüfen Sie nach Abschluss des Hinzufügens die Konsolenausgabe des Browsers:

 Sie werden feststellen, dass die Ausgabe das JQuery-Objekt $ ist, das wir normalerweise verwenden. Zu diesem Zeitpunkt haben wir jQuery erfolgreich in das Projekt eingeführt.

4. Fügen Sie die js-Bibliothek und die CSS-Bibliothek von zTree in das Projekt ein. In der Datei index.html fügen wir den folgenden Code hinzu:

"Danach können wir testen, ob zTree normal eingeführt wird. Wir fügen der ngOnInit-Methode in der Datei demo.component.ts den folgenden Code hinzu: "console.log($.fn. zTree );“ Überprüfen Sie die Konsole und Sie werden die folgende Ausgabe finden: in der Ausgabe Aus dem Inhalt können wir ersehen, dass zTree eine Init-Methode zum Initialisieren verwendet, sodass wir tatsächlich ein zTree-Beispiel schreiben können.

5.zTree-Beispiel

Wir schauen uns zTree an Wenn Sie den Code initialisieren, werden Sie feststellen, dass er drei Parameter benötigt. Der erste Parameter ist ein jQuery-Objekt und der zweite Parameter ist das zTree-Konfigurationsobjekt. Weitere Informationen finden Sie in der offiziellen Dokumentation von zTree (http://www.treejs.cn/v3/api.php), der dritte Parameter wird verwendet, um die Daten des zTree-Knotens zu generieren

Hier verwenden wir direkt den Democode in zTree und kopieren ihn direkt zu demo.component.ts. In der Datei:

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

}

Sehen Sie sich den obigen Code an, $.fn.zTree($("#ztree"),this.setting,this.zNodes); jQuerys ID-Selektor, dann müssen wir der Vorlagendatei demo.component.html ein ul-Element mit der ID hinzufügen.

<ul id="ztree"><ul>

Warum es ul ist, können Sie natürlich in der zTree-Dokumentation lesen. Sie können auch andere Elemente ausprobieren, um zu sehen, ob es funktioniert.

Das Obige ist, was ich für Sie zusammengestellt habe.

Verwandte Artikel.

Wie verwende ich js, um die App in WeChat aufzurufen?

Wie verwende ich das http-Modul in node.js? 🎜>Was sind die Javascript-Debugging-Befehle?

Detaillierte Interpretation des Dateisystems und -flusses in Node.js

Was sind die Anwendungsszenarien von Unterprozessen in Node.js

Über das child_process-Modul im Knoten (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo integrieren Sie Plug-Ins mit Angular2 (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!