0

Estoy actualmente en un componente TS haciendo validaciones, sin embargo tengo un evento en un archivo javascript que llamé de la siguiente manera:

ngOnInit(): void {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = 'assets/js/ruleta.js';
    head.appendChild(script);
  }

Este es mi script ruleta.js

 var indicator = new TimelineMax();
    var spinWheel = new TimelineMax();
    indicator.to(active, .13, { rotation: -10, transformOrigin: "65% 36%", ease: Power1.easeOut })
        .to(active, .13, { rotation: 3, ease: Power4.easeOut })
        .add("end");

    //  Luckywheel animation
    spinWheel.to(wheel, 5, {
        rotation: deg, transformOrigin: "50% 50%", ease: Power4.easeOut, onUpdate: (
            function () {
                //_gsTransform: current position of the wheel
                tolerance = currentRotation - lastRotation;

                if (Math.round(currentRotation) % (360 / 12) <= tolerance) {
                    if (indicator.progress() > .2 || indicator.progress() === 0) {
                        indicator.play(0);
                    }
                }

            }
        )
    });
    spinWheel.add("end");

Básicamente estoy tratando de llamar a una animación que hace girar una ruleta de la fortuna, el caso es que me gustaria desde Typescript llamar a la función de Javascript, para que la animación se ejecute

girarRueda(){
  activarRuleta(360);
}

Algo similar. ¿Hay alguna forma de llamar dicha función desde TS?

ADD:

Intenté esto

 girarRueda2(){
   this.script.activarRuleta();
}

Debido a que previamente declaré un script.src en el ngOnInit, pero sigue sin dar resultados

1

2 respuestas 2

1

Suponiendo que tengamos el siguiente Javascript ruleta.js:

function girarRuleta(){
    console.log("Girando")
}

Puedes usarlo desde TypeScript de la siguiente manera:

girarRueda(){
    window["girarRuleta"]();
}

Debería funcionar perfectamente, saludos.

5
  • Esto no funciona, me indica "El elemento tiene un tipo 'any' implícito porque la expresión de índice no es de tipo 'number'.ts(7015)" el 7 oct. 2022 a las 13:48
  • Lo siento, me he equivocado, colócalo así: window["girarRuleta"]();
    – Spearking
    el 7 oct. 2022 a las 13:51
  • No entiendo muy bien que hace la propiedad window[], podrías explicarme un poco sobre ello? te lo agradecería mucho. La verdad es que no está activando la función el 7 oct. 2022 a las 14:04
  • Si claro, Window apunta al propio objeto ventana es decir hace referencia a la página web o ventana que está abierta, incluyendo todas las funciones o variables que esten declaradas, Por lo que le estas diciendo a TypeScript en la ventana hay una función llamada girarRuleta y quieres ejecutarla, procura ejecutarla solo si el archivo javascript esta añadido por ejemplo: let interval = setInterval(() => { if(window["girarRuleta"] == null){ return; } clearInterval(interval); this.girarRueda(); }, 1000) Eso es si quieres que se ejecute solo.
    – Spearking
    el 7 oct. 2022 a las 14:10
  • Si el archivo Javascript no se ha añadido aún antes de llamar window["girarRuleta"](); no funcionará, Por eso te puse ese ejemplo que puedes colocar en el ngOnInit si quieres que se ejecute automáticamente, sino puedes simplemente colocar un botón en la interfaz que llame a esa función, depende de lo que estés desarrollando.
    – Spearking
    el 7 oct. 2022 a las 14:14
0

Lo logré resolver así:

  • Para definir una función que está en mi archivo Javascript, en Typescript, usando el mismo nombre coloqué:

    declare var activarRuleta:any;
    

Luego importas el javascript con el AppenChield:

ngOnInit(): void {
    var head = document.getElementsByTagName('head')[0];
    this.script = document.createElement('script');
    this.script.src = 'assets/js/ruleta.js';
    head.appendChild(this.script);
  }

Y por consiguiente, podrás utilizar la función en cualquier lugar del archivo TS, simplemente invocándolo:

 activarRuleta();

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.