Quiero usar "window["initMapCallback"] para llamar y escuchar "initMapCallback" en otro archivo, pero recibo un error en la ventana de depuración que dice
Pregunta : ¿Cómo uso correctamente esto ya que "window["initMapCallback"] = function()" no se activa?
No capturado (en promesa) TypeError: window.initMapCallback no es una función en initMap ((índice): 35:32)
<script> function initMap() { window["initMapCallback"](); // error here! } </script> <script src="https://maps.googleapis.com/maps/api/js?key=secret-key&libraries=places&callback=initMap" type="text/javascript" async defer></script>En el componente donde quiero escucharlo y recibirlo tengo esto
ngOnInit() { window["initMapCallback"] = function() { console.log('listener entered'); }; }Si elimino el "()" de la llamada, no hay ningún error, pero aún no puedo llamar o ingresar la función.
Lo que sucede es que el JS externo está listo antes que su aplicación Angular y el componente dado, y la función aún no está configurada. También está muy mal. ¿Por qué no intentar cargar el mapa js dentro de Angular y activar la devolución de llamada allí?
public loadScript(url: string, callback: () => void): void { if (document.querySelector(`script[src="${url}"]`)) { callback(); return; } const script = document.createElement('script'); script.onload = callback(); script.src = url; document.body.appendChild(script); }Y luego, cuando necesites el mapa:
this.loadScript( "https://maps.googleapis.com/maps/api/js?key=secret-key&libraries=places", () => { // some callback, usually subscription in a service } );La forma de escuchar otro archivo Angular es principalmente con suscripciones y servicios, no debe usar el objeto de ventana para esto.