Javascript Girl
  1. Javascript Girl
  3. Angulaire 2 – communication de fonctions dactylographiées avec des bibliothèques externes js
Intereting Posts
Filtre multiple AngularJS avec fonction de filtre personnalisée Comment puis-je avoir un élément div fixe verticalement? Mettre en surbrillance une expression de document html dans Asp.net mvc en utilisant JavaScript La méthode du constructeur Javascript renvoie quelque chose de différent de prévu Que devrait-il retourner un constructeur JavaScript s'il échoue? Ne peut pas sélectionner les années BC Beaucoup de boutons XFBML Facebook Like sont lents? JavaScript Regex correspond à une URL dans un champ de texte Passage variable par référence complète En utilisant jQuery pour trouver un élément dans un poste particulier? Commande "npm isntall" Visual Studio 2012 JavaScript Intellisense ne fonctionne pas Lien vers .cshtml vue depuis javascript Comment savoir quel élément DOM attire l'attention? Vérifiez si la chaîne contient uniquement des chiffres

Angulaire 2 – communication de fonctions dactylographiées avec des bibliothèques externes js

Utilisation de la jauge Infovis Toolkit en tant que bibliothèque externe pour dessiner des graphiques et des arbres. J'ai besoin de manipuler la méthode onClick des nœuds afin d'envoyer de manière asynchrone une demande HTTP GET au serveur et d'attribuer les données provenant du serveur aux propriétés et aux variables d'une classe de service Angular. En utilisant Webpack pour l'emballage de tous les types de textes compilés dans un seul fichier js, le fichier de sortie est confus et illisible. Alors appeler une fonction qui se trouve dans le fichier j j compilé à partir d'une bibliothèque js externe n'est pas la meilleure solution clairement.

J'essaie la solution suivante dans mon service Angulaire afin que je puisse accéder aux propriétés de ce service sans problème: 

document.addEventListener('DOMContentLoaded', function () { var nodes = document.querySelectorAll(".nodes"); // nodes = [] for (var i = 0; i < nodes.length; i++) { // nodes.length = 0 nodes[i].addEventListener("click", function () { // asynchronously sending GET request to the server // and assing receiving data to the properties of this Angular service }); } });

Cependant, cette solution ne fonctionne pas car, dans la boîte à outils Infovis d'Javascript, les nœuds sont dessinés après avoir fini le rendu de DOM et aussi après l'événement window.onload . Cette bibliothèque possède des méthodes de cycle de vie telles que onAfterCompute () qui s'appelle après l'achèvement de l'arbre de dessin. Comment puis-je déclencher un événement global pour informer le service Angulaire que le dessin de l'arbre est terminé et qu'il peut interroger tous les nœuds?

Fais juste un événement personnalisé à l'aide de dispatchEvent

En angulaire, vous pouvez écouter en ajoutant à n'importe quel composant qui est réellement ajouté au DOM

  • Dans n'importe quel modèle: 
 <div (window:custom-event)="updateNodes($event)">
  • Dans la classe des composants 
 @HostListener('window:custom-event', ['$event']) updateNodes(event) { ... }
  • Ou dans l' @Component() ou @Directive() 
 @Component({ selector: '...', host: {'(window:custom-event)':'updateNodes($event)'} })

Où custom-event est le type de l'événement expédié et updateNodes(event) est une méthode dans votre classe de composants.

Une approche alternative

Serait de créer des méthodes de composants (ou directives, services) disponibles en dehors de Angular, comme expliqué dans Angular2 – comment appeler la fonction de composant hors de l'application