如何在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回調

回答

相關問題