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

【问题标题】：How to access class variable / methods in callback in Typescript?如何在 Typescript 的回调中访问类变量/方法？
【发布时间】：2021-06-29 06:07:30
【问题描述】：

我在我的角度项目中使用高图表 API，所以我需要的是当我深入到任何地图位置时，我已经获得了我传递给我的类级别方法的状态代码，以便在其中执行一些服务.

这是我当前的代码：

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，它位于我的类组件方法中。实现它的正确方法是什么？

【问题讨论】：

标签： javascript angular typescript highcharts angular2-highcharts

【解决方案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;
            });

【讨论】：