如何在angular2中使用winwheel.js回调 [英] how to use winwheel.js callback in angular2

问题描述

我一直在使用轮盘设计，我需要一个轮盘，所以我正在使用winwheel.js库.

I have been working with a roulette design, where i need a wheel, so i am using winwheel.js library.

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.
  }

一切正常，但是在轮子停止旋转后，它需要一个回调函数，以便我们可以在轮子停止旋转后编写逻辑，所以我像这样传递它，

Everything is working fine, but after the wheel has stopped spinning, it needs a callback function so that we can write our logic after the wheel has stopped spinning, so i am passing it like this,

'callbackFinished': 'alertPrize()'

，但在这种情况下， alertPrize 需要在全局范围内，以便 winwheel.js 可以访问此功能.由于我的警报功能是在组件内部声明的，因此无法访问winwheel js.

but in this case alertPrize needs to in global scope so that winwheel.js can access this function. Since my alert function is declared inside component so it is not accessbile to winwheel js.

如果我这样在 index.html 中定义函数，则可以访问它，因为它在全局范围内

If i define my function inside index.html like this, then it is accessible, since it is in global scope

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

但是我想要组件内部的 alertPrize()，以便我可以在其中编写一些逻辑.

But i want the alertPrize() inside the component so that i can write some logic inside it.

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

Is there a way to tackle this problem.

推荐答案

我最终修改了行 2266 上的库 Winwheel.js ，删除了解析的eval函数.函数字符串到一个简单的函数回调:

I ended up modifying the library Winwheel.js at line 2266 to remove the eval function that parses the function string to a simple function callback:

eval(winwheelToDrawDuringAnimation.animation.callbackFinished);

到

winwheelToDrawDuringAnimation.animation.callbackFinished();

然后在您的代码中

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

我将组件范围绑定到回调，以便它可以访问组件类的属性和方法.

where I bind the component scope to the callback so that it can access component class properties and methods.

也许更好的方法是派生git repo并在那里进行此更改，但我没有这样做，因为repo不在 bower 或 npm 上.

Perhaps a better way would have been to fork the git repo and make this change there but I didn't because the repo isn't on bower or npm.

这篇关于如何在angular2中使用winwheel.js回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！