Angular中Highcharts地图下钻事件同时访问组件属性与图表实例咨询

方案1：从事件对象获取图表实例（推荐） #

Highcharts 所有事件回调的事件参数e的target属性天然指向触发事件的图表实例，你完全不需要从this上获取图表对象，直接用箭头函数绑定组件this即可：

export class MapComponent implements OnInit {
  private drilldownData: Highcharts.SeriesMapOptions = { ... };
  public chartOptions: Highcharts.Options = {
    chart: {
      events: {
        // 箭头函数绑定组件this
        drilldown: e => this.handleDrilldown(e)
      }
    }
  }

  private handleDrilldown(e: Highcharts.DrilldownEventObject): void {
    // this指向组件实例，直接访问自定义数据
    const customDrilldownData = this.drilldownData;
    // 从事件对象取图表实例
    const chart = e.target as unknown as Highcharts.MapChart;
    chart.addSeriesAsDrilldown(e.point, { 
      name: e.point.name, 
      data: customDrilldownData 
    });
  }
}

方案2：闭包预存组件实例 #

如果你更习惯用普通函数作为事件回调、保留this指向图表实例的写法，可以在组件初始化阶段预存组件实例的引用：

export class MapComponent implements OnInit {
  private drilldownData: Highcharts.SeriesMapOptions = { ... };
  // 不在类属性直接初始化，移到ngOnInit里赋值
  public chartOptions!: Highcharts.Options;

  ngOnInit(): void {
    // 预存当前组件实例的引用
    const componentInstance = this;

    this.chartOptions = {
      chart: {
        events: {
          // 用普通函数，this保留为Highcharts图表实例
          drilldown(e) {
            const chart = this as unknown as Highcharts.MapChart;
            // 从预存的变量取组件实例的自定义数据
            chart.addSeriesAsDrilldown(e.point, { 
              name: e.point.name, 
              data: componentInstance.drilldownData 
            });
          }
        }
      }
    }
  }
}

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