Winwheel.js在Ionic3/Angular2中调用getIndicatedSegment报undefined错误

嘿，我刚看完你的问题，这个错误其实很常见——就是上下文绑定的问题！你之前在index.html里写的全局alertPrize函数，它里面的this根本不是指向你的LuckySpinPage组件实例，而是全局的window对象，所以this.wheel自然就是undefined啦。

下面是具体的修复步骤，帮你搞定这个问题同时实现中奖判断：

第一步：移除全局函数，把逻辑移到组件内 #

先删掉index.html里那个全局的<script>标签，所有回调逻辑都放到你的LuckySpinPage组件里，这样就能直接访问组件里的wheel变量了。

第二步：修改Winwheel的回调绑定 #

在initWheel方法里，把animation配置里的callbackFinished从字符串'alertPrize()'改成箭头函数，这样就能确保回调执行时的this指向你的组件实例：

'animation': {
  'type': 'spinToStop',
  'duration': 5,
  'spins': 10,
  // 用箭头函数绑定组件上下文
  'callbackFinished': () => this.alertPrize()
}

第三步：在组件内实现alertPrize方法 #

直接在组件里添加alertPrize方法，这里可以直接调用this.wheel.getIndicatedSegment()，然后根据你的需求判断是否中奖：

alertPrize() {
  // 现在能正常获取到中奖段了！
  const winningSegment = this.wheel.getIndicatedSegment();
  
  // 这里根据你的需求判断中奖条件：比如你说的"第4段"，注意Winwheel的segments索引是从0开始的
  // 假设你指的第4段是segments数组里的第4个元素（索引3），或者是segment-winner那一段
  const isWin = winningSegment.index === 3 || winningSegment.image.includes('segment-winner');
  
  if (isWin) {
    alert("中奖了！");
  } else {
    alert("未中奖");
  }
  
  // 别忘了重置旋转状态，允许用户再次点击
  this.wheelSpinning = false;
}

完整修改后的LuckySpinPage.ts代码 #

export class LuckySpinPage { 
  constructor(public navCtrl: NavController) { } 
  wheel: Winwheel; // 加上类型声明更规范
  wheelSpinning = false; 

  ngAfterViewInit() { 
    this.initWheel(); 
  } 

  initWheel() { 
    this.wheel = new Winwheel({ 
      'numSegments': 10, 
      'outerRadius': 150, 
      'innerRadius': 30, 
      'pointerAngle': 0, 
      'pointerGuide': false, 
      'drawMode' : 'segmentImage', 
      'segments': [ 
        {'image' : '../../assets/images/segment-winner.png'}, 
        {'image' : '../../assets/images/segment-1.png'}, 
        {'image' : '../../assets/images/segment-2.png'}, 
        {'image' : '../../assets/images/segment-3.png'}, 
        {'image' : '../../assets/images/segment-5.png'}, 
        {'image' : '../../assets/images/segment-6.png'}, 
        {'image' : '../../assets/images/segment-7.png'}, 
        {'image' : '../../assets/images/segment-8.png'}, 
        {'image' : '../../assets/images/segment-9.png'}, 
        {'image' : '../../assets/images/segment-10.png'} 
      ], 
      'animation': { 
        'type': 'spinToStop', 
        'duration': 5, 
        'spins': 10, 
        'callbackFinished': () => this.alertPrize() 
      } 
    }); 
  } 

  startSpin() { 
    if (this.wheelSpinning === false) { 
      this.wheel.startAnimation(); 
      this.wheelSpinning = true; 
    } 
  } 

  alertPrize() {
    const winningSegment = this.wheel.getIndicatedSegment();
    // 自定义你的中奖判断逻辑，这里示例判断索引3或者winner段
    const isWinning = winningSegment.index === 3 || winningSegment.image.includes('segment-winner');
    
    alert(isWinning ? "中奖了！" : "未中奖");
    this.wheelSpinning = false;
  }
}

这样修改后，不仅能解决getIndicatedSegment undefined的问题，还能完美实现你要的中奖提示逻辑啦！

内容的提问来源于stack exchange，提问作者Brentdb