javascript - 传递类引用的 Angular 范围问题中的 Highcharts

Question

我有渲染图表的组件，我想在格式化程序的帮助下用看起来像这样的数据覆盖初始工具提示:

tooltip: {
  formatter: function () {
    console.log(this);
    // logs data described aboved code snippet
    console.log(this.filterService.getFilters());
    // logs undefined as its component method
  }
}

其中 console.log(this) 记录有关图表上悬停项目的数据，如下所示:

{
  x: "xxxxx",
  y: 94,
  color: "#58a310",
  colorIndex: 0,
  key: "xxxxx",
  series: e {proceed: null, chart: a.Chart, userOptions: {…}, tooltipOptions: {…}, 
  stickyTracking: false, …},
  point: C {series: e, color: "#58a310", y: 94, options: {…}, isNull: false, …},
  percentage: 60.256410256410255,
  total: 156,
  ...
}

我需要来自该组件使用的服务的一些数据，因此我可以使用格式化程序的箭头函数来访问它:

tooltip: {
  formatter: () => {
    // here `this` refers to component class
    console.log(this.filterService.getFilters());
    // logs filters data, which I need 
  }
}

所以我需要这两个(图表项数据和过滤器)来执行我想要的操作，但是，没有找到获取它们的方法，只有一个或另一个取决于我如何声明 func。

Answer 1

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

tooltip: {
  formatter: (function(component) {
    return function() {
      console.log(component, this);
    }
  })(this)
}

<小时/>

现场演示: http://jsfiddle.net/BlackLabel/6m4e8x0y/4808/