如何在HighCharts回調中訪問「this」的不同上下文（Angular/Typescript）

Question

我在Angular/Typescript項目中使用HighCharts。一般來說，它工作正常，但現在我卡住了：

點擊某個點時，我想從http服務獲得有關該點的更多信息。 HighCharts提供了添加回調函數的可能性：http://api.highcharts.com/highstock/plotOptions.series.point.events.click

問題是我需要有關點的信息（點信息綁定到'this'），但也調用服務'this'引用類實例。

@Component({ 
    // ... 
}) 
export class ChartComponent { 

    chart: any; 

    constructor(private dataService: DataService) { } 

    onPointClick(point: any) { 
     this.dataService.getPointDetails(point) // then ... 
    } 

    buildDataChart() { 
     let Highcharts = require('highcharts/highstock'); 
     this.chart = new Highcharts.StockChart({ 
      // ... 
      plotOptions: { 
       series: { 
        point: { 
         events: { 
          click: // How to implement this function? 
         } 
        } 
       } 
      } 
     }); 
    } 
} 

我嘗試不同的事情沒有成功：

click: function() { 
    console.log('Point information ' + this.x + ' ' + this.y); 
    // outside of Angular scope and service cannot be reached. 
} 

有了這個我也角範圍

click: this.onPointClick 

現在我是角範圍內之外，但不得不點進不去信息：

click: this.onPointClick.bind(this) 

在這裏，我也角範圍內，但沒有接入點信息：

click:() => this.onPointClick(this) 

有誰知道我可以拿點信息以及與此調用這個服務？我現在唯一能想到的就是一些全球性的dom元素，但這看起來不太好。

Answer 1

您應該使用event參數通過點擊事件發送並將您的處理程序（onPointClick）定義爲組件類的字段值。這種方式不需要bind或怪異this。內event點是在event.point定義：

export class ChartComponent { 

    chart: any; 

    constructor(private dataService: DataService) { } 

    onPointClick = (event: any) => { 
     this.dataService.getPointDetails(event.point); 
    }; 

    buildDataChart() { 
     let Highcharts = require('highcharts/highstock'); 
     this.chart = new Highcharts.StockChart({ 
      plotOptions: { 
       series: { 
        point: { 
         events: { 
          click: this.onPointClick 
         } 
        } 
       } 
      } 
     }); 
    } 
}