So rufen Sie JS-Plugins von Drittanbietern in Angular5 auf (ausführliches Tutorial)

Im Folgenden werde ich Ihnen einen Artikel zum Aufrufen von JS-Plugins von Drittanbietern in Angular5 vorstellen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist.

Kommen wir ohne weitere Umschweife zur Sache. Es gibt drei gängige Möglichkeiten, auf Plug-ins von Drittanbietern zu verweisen. Im Folgenden werden das JQuery-Plug-In und zwei auf JQuery basierende Plug-Ins verwendet und rangeSlider als Beispiele.

1. Der erste Weg:

in der Datei .angular-cli.json konfigurieren:

1. Suchen Sie das Skriptfeld in der Datei .angular-cli.json im Projektstammverzeichnis und fügen Sie alle JS-Dateien hinzu, auf die im Array verwiesen werden soll (beachten Sie die Reihenfolge).

"scripts": ["assets/jquery-3.2.1.js","assets/jquery.nicescroll.js","assets/ion.rangeSlider.js"],

2. Machen Sie die folgende Anweisung in der Komponente, die das Plug-in verwenden muss (in der .ts-Datei): deklarieren var $:any;

Der Zweck besteht darin, Kompilierungsfehler zu verhindern

3 Als nächstes können Sie die oben genannten drei Plug-Ins normal in der ngOnInit-Methode verwenden.

Zweiter Weg: Referenzieren Sie das Plug-in auf der Seite index.html

Schritte:

1. Fügen Sie den folgenden Verweis auf die Seite index.html im Stammverzeichnis hinzu:

<script type="text/javascript" src="assets/jquery-3.2.1.js"></script> 
<script type="text/javascript" src="assets/jquery.nicescroll.js"></script>

2. Machen Sie die folgende Anweisung in der Komponente, die das Plug-in verwenden muss (in der .ts-Datei): deklarieren Sie var $:any;

Der Zweck besteht darin Kompilierungsfehler verhindern

3. Als nächstes können Sie die oben genannten drei Plug-Ins normal in der ngOnInit-Methode verwenden

3. ins in bestimmten Komponenten

Schritte:

1 Fügen Sie der ts-Datei den folgenden Verweis hinzu muss das Plug-in verwenden:

import "assets/jquery-3.2.1.js"; 
import "assets/jquery.nicescroll.js"; 
import "assets/ion.rangeSlider.js";

2. Machen Sie die folgende Anweisung in der Komponente, die das Plug-in verwenden muss (in der .ts-Datei): deklarieren Sie var $:any;

Der Zweck besteht darin, Kompilierungsfehler zu verhindern

3. Als nächstes können Sie die oben genannten drei Plugs verwenden -ins normalerweise in der ngOnInit-Methode

Die drei Methoden wurden vorgestellt, auf die man achten muss. Die ersten beiden Methoden müssen zum Neustarten des Dienstes wirksam sein Wenn Sie zu diesem Zeitpunkt ng Serve verwenden, funktioniert dies nicht, wenn es nicht neu gestartet wird. Bei der dritten Methode ist kein Neustart des Dienstes erforderlich. Sie können den Effekt direkt sehen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detaillierte Einführung in die Verwendung und Funktionen der JsChart-Komponente

Durch Verwendung des automatischen Generators in ionic2 Was sind die Methodenschritte?

Codebeispiel zum Implementieren des Datei-Uploads über AjaxUpLoad.js (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo rufen Sie JS-Plugins von Drittanbietern in Angular5 auf (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!