如何在发出的Highcharts选择事件回调函数中获取角度分量类参考？

Question

我想这是一个与javascript闭包相关的一般问题，但是我将使用特定的示例，因为我无法以角度思考来解决问题。

我有一个角度分量，该角度分量正在使用Highcharts库显示图表。当用户通过鼠标拖动选择图表的一部分时，高图可以发出事件。该事件提供了一个回调函数，该函数带有2个参数，例如function(chartRef, event)。我提供了对回调函数的类方法的引用。当事件由高图发出时，方法this内部绑定到chartRef（回调函数作用域），而不是角度组件类（AppComponent）本身。我如何才能持有角度分量类，以便可以将事件返回的值用于我的角度应用程序？

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