javascript - 如何在发出的 Highcharts 选择事件回调函数中获取 Angular 组件类引用？

Question

我想这是一个与 JavaScript 闭包相关的一般问题，但我将使用具体的示例，因为我无法以 Angular 方式思考它。

我有一个 Angular 组件，它使用 Highcharts 库来显示图表。当用户通过鼠标拖动选择图表的一部分时，Highcharts 可以发出事件。该事件提供了一个回调函数，该函数接受 2 个参数，例如 - function(chartRef, event)。我已经向回调函数提供了类方法的引用。当 highcharts 发出事件时，方法 this 内部绑定(bind)到 ChartRef(回调函数范围)，而不是 Angular 组件类 (AppComponent) 本身。如何获取 Angular 组件类，以便我可以将事件返回的值用于我的 Angular 应用程序？

import { Chart } from 'angular-highcharts'

export class AppComponent {
  @Output() selection = new EventEmitter<any>()

  chart: Chart;

  ngOnInit() {
    this.init();
  }

  init() {
    let chart = new Chart({
      chart: {
        zoomType: 'x',
        events: {
          selection: this.onChartSelectionEvent,
        },
    },
    // code removed for brevity
    this.chart = chart
    )
  }

  onChartSelectionEvent(chartRef, event) {
    console.log(chartRef.xAxis[0].min) // logs correctly
    console.log(chartRef.xAxis[0].max) // logs correctly
    this.selection.next(chartRef.xAxis[0].max) // doesn't work
    // ERROR Error: Cannot read property 'next' of undefined
    // because `this` refers to the chartRef, not the angular class
  }
}

Stackblitz for the problem

Answer 1

您可以使用IIFE存储组件引用:

onChartSelectionEvent = (function(self) {
    console.log(self)
    return function(chartRef: any, chartEvent:any){
    console.log(chartRef.xAxis[0].min)
    console.log(chartRef.xAxis[0].max)
    console.log(self)
    }
    // `this` is bound to the chartRef that is emmited by the Highcharts event
    // How can I get a hold of the angular component class (AppComponent) instead?
    //this.selection.next(chartRef.xAxis[0].max)
})(this)

演示:https://stackblitz.com/edit/angular-kqzyjv?file=src/app/app.component.ts