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)" Commented el 7 oct. 2022 a las 13:48
  • Lo siento, me he equivocado, colócalo así: window["girarRuleta"]();
    – Spearking
    Commented 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 Commented 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
    Commented 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
    Commented 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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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