如何在 Typescript 的回调中访问 class 变量/方法？

Question

我在我的 angular 项目中使用高图表 API，所以我需要的是当我向下钻取到任何地图位置时，我有我传递到我的状态代码class 级别方法在其中做一些服务。

这是我当前的代码：

ngOnInit() {

this.chartOptions = {
  chart: {
    height: (8 / 16) * 100 + '%',
    events: {
      drilldown(e) {
        // ERROR Error: this.getVendorProductStatsByStateCode is not a function
        this.getVendorProductStatsByStateCode(e.point.drilldown);
        const chart = this as any;

        const mapKey = 'countries/ca/' + e.point.drilldown + '-all';
        const mapData = require(`@highcharts/map-collection/countries/ca/ca-on-all.geo.json`);
        const provinceData = Highcharts.geojson(mapData);
        provinceData.forEach((el: any, i) => {
          el.value = i;
        });

        chart.addSeriesAsDrilldown(e.point, {
          name: e.point.name,
          data: provinceData,

          dataLabels: {
            enabled: true
          }
        });

        chart.setTitle(null, { text: e.point.name });
      },
      drillup() {
        const chart = this as any;
      }
    }
  },
  title: {
    text: ''
  },
  colorAxis: {
    min: 0,
    minColor: '#E6E7E8',
    maxColor: '#417BCC'
  },

  mapNavigation: {
    enabled: true,
    buttonOptions: {
      verticalAlign: 'bottom'
    }
  },
  plotOptions: {
    map: {
      states: {
        hover: {
          color: '#F8BA03'
        }
      }
    }
  },
  series: [
    {
      name: 'Canada',
      data: caMap
    }
  ],
  drilldown: {}
};
}

getVendorProductStatsByStateCode(mapstateCode) {
    console.log(mapstateCode);
}

这是stackblitz running example

调用下钻函数时，我想访问 this.getVendorProductStatsByStateCode，它在我的 class 组件方法中。实现它的正确方法是什么？

Answer 1

您可以在变量中定义您的组件并使用此变量而不是 (this)，因为它是方法的实例而不是那样的组件：

  caMap.forEach((el: any, i) => {
      el.value = i;
      el.drilldown = el.properties['hc-key'];
    });
    var myComp = this;
    this.chartOptions = {
      chart: {
        height: (8 / 16) * 100 + '%',
        events: {
          drilldown(e) {
            // ERROR Error: this.getVendorProductStatsByStateCode is not a function
            myComp.getVendorProductStatsByStateCode(e.point.drilldown);
            const chart = this as any;

            const mapKey = 'countries/ca/' + e.point.drilldown + '-all';
            //Stackbliz wont load data if you pass mapkey as variable. So I use a hard code one in this example.
            // const mapData = require(`@highcharts/map-collection/${mapKey}.geo.json`);
            const mapData = require(`@highcharts/map-collection/countries/ca/ca-on-all.geo.json`);
            const provinceData = Highcharts.geojson(mapData);
            // Set a random value on map
            provinceData.forEach((el: any, i) => {
              el.value = i;
            });

如何在 Typescript 的回调中访问 class 变量/方法？

How to access class variable / methods in callback in Typescript?

javascript

angular

typescript

highcharts

angular2-highcharts