Comment appeler des plug-ins js tiers dans Angular5 (tutoriel détaillé)

Ci-dessous, je partagerai avec vous un article sur la façon d'appeler des plug-ins js tiers dans Angular5. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Sans plus tarder, allons droit au but. Il existe trois manières les plus courantes de référencer des plug-ins tiers. Ce qui suit prend le plug-in jquery et deux plug-ins basés sur JQuery : nicescroll. et rangeSlider comme exemples.

1. La première façon : configurer

dans le fichier .angular-cli.json Étapes :

1. Recherchez le champ de script dans le fichier .angular-cli.json dans le répertoire racine du projet et ajoutez tous les fichiers js à référencer dans le tableau (notez l'ordre)

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

2. Faites la déclaration suivante dans le composant qui doit utiliser le plug-in (dans le fichier .ts). ): declare var $:any;

Le but est d'éviter les erreurs de compilation

3 Ensuite, vous pouvez utiliser les trois plug-ins ci-dessus normalement dans ngOnInit. méthode.

Deuxième méthode : Référencez le plug-in sur la page index.html

Étapes :

1. Ajoutez la référence suivante à la page index.html dans le répertoire racine :

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

2. Faites la déclaration suivante dans le composant qui doit utiliser le plug-in (dans le fichier .ts) : déclarez var $:any;

Le but est d'éviter les erreurs de compilation

3. Ensuite, vous pouvez utiliser normalement les trois plug-ins ci-dessus dans la méthode ngOnInit

3. plug-ins dans des composants spécifiques

Étapes :

1. Ajoutez la référence suivante au ts. fichier qui doit utiliser le plug-in :

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

2. Faites la déclaration suivante dans le composant qui doit utiliser le plug-in (dans le fichier .ts) : déclarer var $: any;

Le but est d'éviter les erreurs de compilation

3. les trois plug-ins ci-dessus normalement dans la méthode ngOnInit

Les trois méthodes ont été introduites. Parlons des choses auxquelles il faut prêter attention. Les deux premières méthodes doivent redémarrer le service. efficace (j'utilisais ng serve à l'époque, et cela ne fonctionnera pas s'il n'est pas redémarré) ; la troisième méthode Vous pouvez voir l'effet directement sans redémarrer le service.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Introduction détaillée à l'utilisation et aux fonctions du composant JsChart

En utilisant le générateur automatique dans ionic2 Quelles sont les étapes de la méthode ?

Exemple de code de téléchargement de fichiers via AjaxUpLoad.js (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!