Angular 2 - Kommunikation von Typescript-Funktionen mit externen js-Bibliotheken

Question

Verwendung von Javascript Infovis Toolkit als externe Bibliothek zum Zeichnen von Graphen und Bäumen. Ich muss die OnClick-Methode der Knoten manipulieren, um eine HTTP-GET-Anfrage asynchron an den Server zu senden und die Daten, die vom Server kommen, den Eigenschaften und Variablen einer Angular-Dienstklasse zuzuweisen. Durch Verwendung von Webpack zum Packen aller kompilierten Typoskripte in eine einzige js-Datei ist die Ausgabedatei verwirrend und nicht lesbar. Das Aufrufen einer Funktion, die sich in der kompilierten js-Datei aus einer externen js-Bibliothek befindet, ist nicht eindeutig die beste Lösung.

Ich versuche, die folgende Lösung in meinem Angular-Service, so kann ich ohne Probleme auf die Eigenschaften dieses Dienstes zugreifen:

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

 
});

Diese Lösung ist jedoch nicht, da funktioniert in Javascript Infovis Toolkit Die Knoten werden gezeichnet, nachdem das Rendern von DOM beendet wurde und auch nach window.onload Ereignis. Diese Bibliothek verfügt über einige Lebenszyklusmethoden wie onAfterCompute(), die aufgerufen wird, nachdem der Zeichnungsbaum fertiggestellt wurde. Wie kann ich ein globales Ereignis auslösen, um den Angular-Service darüber zu informieren, dass das Zeichnen des Baums abgeschlossen ist und alle Knoten abfragen kann?

Answer 1

Starten Sie einfach ein benutzerdefiniertes Ereignis mit dispatchEvent.

In Angular können Sie hören von einer beliebigen Komponente hinzufügen, die tatsächlich auf das DOM hinzugefügt wird:

• in einer Vorlage:

<div (window:custom-event)="updateNodes($event)"> 

• oder in der Komponenten-Klasse :

@HostListener('window:custom-event', ['$event']) 
updateNodes(event) { 
    ... 
} 

• oder im @Component() oder @Directive() Anmerkung:

@Component({ 
    selector: '...', 
    host: {'(window:custom-event)':'updateNodes($event)'} 
}) 

wo custom-event die Art der geschickten Ereignis ist und updateNodes(event) ist eine Methode in Ihrer Komponenten-Klasse.

Um es manuell in JavaScript auslösen:

window.dispatchEvent(new Event('custom-event')); 

Ein alternativer Ansatz

würde Methoden der Komponenten (oder Richtlinien, Dienstleistungen) zur Verfügung außerhalb Angular wie erklärt in Angular2 - how to call component function from outside the app zu machen.