如何在angular2中使用winwheel.js回调

我一直在使用轮盘赌设计，我需要一个轮子，所以我使用winwheel.js库。如何在angular2中使用winwheel.js回调

wheel; 


wheelSpinning = false; 

    constructor() { 
    } 

    ngAfterViewInit() { 
    this.initWheel(); 
    } 

    initWheel() { 
    this.wheel = new Winwheel({ 
     'numSegments': 8, // Specify number of segments. 
     'outerRadius': 212, // Set radius to so wheel fits the background. 
     'innerRadius': 150, // Set inner radius to make wheel hollow. 
     'pointerAngle': 90, 
     'pointerGuide':  // Turn pointer guide on. 
     { 
     'display': true, 
     'strokeStyle': 'red', 
     'lineWidth': 3 
     }, 
     'segments':  // Define segments including colour and text. 
     [ 
     { 'fillStyle': '#eae56f', 'text': 'Prize 1' }, 
     { 'fillStyle': '#89f26e', 'text': 'Prize 2' }, 
     { 'fillStyle': '#7de6ef', 'text': 'Prize 3' }, 
     { 'fillStyle': '#e7706f', 'text': 'Prize 4' }, 
     { 'fillStyle': '#eae56f', 'text': 'Prize 5' }, 
     { 'fillStyle': '#89f26e', 'text': 'Prize 6' }, 
     { 'fillStyle': '#7de6ef', 'text': 'Prize 7' }, 
     { 'fillStyle': '#e7706f', 'text': 'Prize 8' } 
     ], 
     'animation':   // Define spin to stop animation. 
     { 
     'type': 'spinToStop', 
     'duration': 5, 
     'spins': 8, 
     'callbackFinished': 'alertPrize()' 
     } 
    }); 
    } 

    public alertPrize() { 
    console.log('wheel'); 
    } 

    // ------------------------------------------------------- 
    // Click handler for spin button. 
    // ------------------------------------------------------- 
    startSpin() { 
    // Ensure that spinning can't be clicked again while already running. 
    if (this.wheelSpinning === false) { 
     this.wheel.startAnimation(); 
     this.wheelSpinning = true; 
    } 
    } 

    // ------------------------------------------------------- 
    // Function for reset button. 
    // ------------------------------------------------------- 
    resetWheel() { 
    this.wheel.stopAnimation(false); // Stop the animation, false as param so does not call callback function. 
    this.wheel.rotationAngle = 0;  // Re-set the wheel angle to 0 degrees. 
    this.wheel.draw();    // Call draw to render changes to the wheel. 

    this.wheelSpinning = false;   // Reset to false to power buttons and spin can be clicked again. 
    }

一切工作正常，但车轮已经停止旋转后，它需要一个回调函数，使车轮停止旋转后，我们可以写我们的逻辑，所以我向它传递这样，

'callbackFinished': 'alertPrize()'

但在这种情况下alertPrize需要在全局范围内，以便winwheel.js可以访问此功能。由于我的警报函数是在组件内声明的，所以它不能访问winwheel js。

如果我定义我的内index.html这样的功能，那么它是可访问的，因为它是在全球范围内

<script> 
    function alertPrize() { 
     console.log('wheel'); 
    } 
    </script>

但我想alertPrize()在组件内部，这样我可以写在它里面的一些逻辑。

有没有办法解决这个问题。

来源

2017-06-01 Chandra Shekhar

嗨，你有没有试过将你的函数声明为组件中的胖箭头函数？ ..或...尝试使用proptotype –

[在JavaScript函数中定义全局变量]的可能重复（https://stackoverflow.com/questions/5786851/define-global-variable-in-a-javascript-function） –

我结束了在线路2266修改库Winwheel.js移除解析函数的字符串到一个简单的回调函数eval函数：

eval(winwheelToDrawDuringAnimation.animation.callbackFinished);

到

winwheelToDrawDuringAnimation.animation.callbackFinished();

然后在您的代码

'callbackFinished': 'alertPrize()'变为'callbackFinished': this.alertPrize.bind(this)

其中我将组件的作用域绑定到回调，以便它可以访问组件类的属性和方法。

也许更好的办法是分叉git回购，并在那里做这个改变，但我没有，因为回购不在bower或npm。

来源

2017-07-21 03:09:46

U r缺少这个 'winwheelToDrawDuringAnimation.getIndicatedSegment（）' 作为调用者的参数 –

如何在angular2中使用winwheel.js回调

回答

相关问题