Winular.js回调函数在Angular中不起作用

时间:2018-04-04 12:07:24

标签: javascript angular typescript

我在组件ts文件中使用了这段代码

wheelSpinning = false;

  constructor() {
  }

  ngAfterViewInit() {
    this.initWheel();
  }

  initWheel() {
    this.wheel = new Winwheel({
      'numSegments': 8,   // Specify number of segments.
      'outerRadius': 155,  // Set radius to so wheel fits the background.
      'innerRadius': 150,  // Set inner radius to make wheel hollow.
      'pointerAngle': 90,
      'textFontSize':0,
      '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' }
        ],
      //'segments'        : this.getSegments(),
      'animation':           // Define spin to stop animation.
        {
          'type': 'spinToStop',
          'duration': 5,
          'spins': 8,
          'callbackFinished': 'alertPrize()'
        },
    });
  }

  startSpin() {
    // Ensure that spinning can't be clicked again while already running.
    if (this.wheelSpinning === false) {
      this.wheel.startAnimation();
      this.wheelSpinning = true;
    }
  }
  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.
  }
 ngOnInit() {
  }
}

然后在index.html中使用此函数。

// This function called after the spin animation has stopped.
function alertPrize() {
  var winningSegment = this.wheel.getIndicatedSegment();
  alert(winningSegment);
  console.log("You have won " + winningSegment.text + "!");
}

但它说“getIndicatedSegment”未定义。

这里的任何解决方案?

1 个答案:

答案 0 :(得分:0)

该错误告诉您究竟是什么问题。

initWheelnew Winwheel({...}))中的逻辑是个问题。 Winwheel类没有getIndicatedSegment方法。要么就是那个,或者那个方法还没有在运行时创建(但我怀疑是这样的)。如果您正在使用lib,它应该静态存在。

因此,请确保调用存在的方法。