Переменная типа Typescript Konva не находится в области видимости

Question

У меня есть проект Ionic, на котором я пытаюсь использовать Konva.js. У меня проблема в том, что один из моих методов класса не распознается во внутренней функции. Я пытаюсь вызвать функцию, как только пользователь щелкает блок текста (tossUpText), но в настоящее время я получаю сообщение об ошибке (как указано в коде), поскольку функция отображается как не определенная.

Вот фрагмент ошибки: https://i.imgur.com/5tWyTHS.png.

Я сделал еще один анализ, и я обнаружил, что в этой области, this это https://i.imgur.com/VJzjHKd.png.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as Konva from 'konva';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  tossUpState: string = 'NOT_STARTED';
  stage: Konva.Stage;
  public layer: Konva.Layer;
  public tossUpText: Konva.Text;

  constructor(public navCtrl: NavController) {

  }

  ngAfterViewInit() {
    var width = window.innerWidth;
    var height = window.innerHeight;

    this.stage = new Konva.Stage({
      container: 'container',
      width: width,
      height: height
    });

    this.layer = new Konva.Layer();

    this.tossUpText = new Konva.Text({
      x: this.stage.getWidth() / 2 - 100,
      y: 15,
      text: '5.00',
      fontSize: 100,
      fill: 'green'
    });
    this.tossUpText.align('center');


    // add the shape to the layer
    this.layer.add(this.tossUpText);

    // add the layer to the stage
    this.stage.add(this.layer);

    this.tossUpText.on('mouseup touchend', function(){
      this.startTossUpTimer(); // error here
    });

  }


  startTossUpTimer() {
    console.log(this);
    if (this.tossUpState == 'NOT_STARTED') {
      // this.setTossUpTime();
    }
  }

}

Answer 1

Используйте функцию стрелки, чтобы сохранить this ссылка:

this.tossUpText.on('mouseup touchend', () => {
  this.startTossUpTimer(); // error here
});