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

时间:2017-06-01 11:41:58

标签: javascript angular callback

我一直在使用轮盘设计,我需要一个轮子,所以我使用的是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(),以便我可以在其中编写一些逻辑。

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

1 个答案:

答案 0 :(得分:1)

我最后在第myTapGesture.cancelsTouchesInView = false 行修改了库Winwheel.js,删除了将函数字符串解析为简单函数回调的eval函数:

2266

eval(winwheelToDrawDuringAnimation.animation.callbackFinished);

然后在你的代码中

winwheelToDrawDuringAnimation.animation.callbackFinished(); 变为'callbackFinished': 'alertPrize()'

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

也许更好的方法是分叉git repo并在那里进行更改,但我没有,因为回购不在'callbackFinished': this.alertPrize.bind(this)bower