javascript - Angular 2: comunicación de funciones mecanografiadas con bibliotecas js externas

typescript webpack

Question

Usar Javascript Infovis Toolkit como una biblioteca externa para dibujar gráficos y árboles. Necesito manipular el método de nodos onClick para enviar asincrónicamente una solicitud HTTP GET al servidor y asignar los datos que provienen del servidor a las propiedades y variables de una clase de servicio angular. Al usar webpack para empaquetar todos los guiones mecanografiados compilados en un solo archivo js, ​​el archivo de salida es confuso e ilegible. entonces llamar a una función que está en el archivo js compilado desde una biblioteca js externa, no es la mejor solución claramente.

Intento la siguiente solución dentro de mi servicio Angular para poder acceder a las propiedades de este servicio sin ningún problema:

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

});

Sin embargo, esta solución no funciona porque en Javascript Infovis Toolkit los nodos se dibujan después de terminar la representación de DOM y también después del evento window.onload . Esta biblioteca tiene algunos métodos de ciclo de vida, como onAfterCompute (), que se llama después de completar el árbol de dibujo. ¿Cómo puedo activar un evento global para informar al servicio Angular que el dibujo del árbol se ha completado y puede consultar todos los nodos?

Answer 1

Simplemente dispara un evento personalizado usando dispatchEvent .

En Angular puede escuchar agregando a cualquier componente que realmente se agrega al DOM:

• en cualquier plantilla:

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

• o en la clase de componentes:

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

• o en la @Component() o @Directive() :

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

donde custom-event es el tipo de evento enviado y updateNodes(event) es un método en su clase de componentes.

Para activarlo manualmente en JavaScript:

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

Un enfoque alternativo

sería hacer que los métodos de componentes (o directivas, servicios) estén disponibles fuera de Angular, como se explica en Angular2: cómo llamar a la función de componentes desde fuera de la aplicación .