Javascript 打字稿中的回调。访问 class 成员和 javascript 'this' 参数

Question

我正在为名为 HighCharts 的库使用 Angular 包装器。当我将鼠标悬停在图表上时会有一个回调，它是 javascript 回调。此 javascript 函数的 this 参数为我提供了我需要的数据，但我也想使用打字稿 this 键盘访问我的打字稿 class 变量。

const options: Highcharts.Options = {
  chart: {
    type: 'column'
  },
  title: {
    text: null
  },
  tooltip: {
      borderWidth: 0,
      style: {
          padding: 0
      },
      useHTML: true,
      formatter: function() {
          return '<div style="float:left">' +
        '<small>Hour ' + this.point.x + '</small>' +
        '</div>' +
        '<div style="float:left;">Production: <b>' + this.point.y + '%</b></div>' +
        '<div style="float:left;">Yield: <b>' + this.yieldCurrent + '%</b></div>' +
        '<div style="float:left;">Reject: <b>' + this.rejectCurrent + ' pcs.</b></div>' +
        '<div style="float:left;">Uptime: <b>' + this.uptimeCurrent + '%</b></div>';
      }
   }
}

如果我使用 funtion() {} 我可以访问 highcharts 提供的 this。

如果我使用粗箭头 () =>，我可以访问 class 提供的 this。

如何在回调中访问这两个参数？我需要从 highcharts 访问 this.point，从我的 class.

访问 this.yieldCurrent、this.rejectCurrent、this.uptimeCurrent

Answer 1

您可以将 class 的 this 对象引用到某个变量，然后在 formatter 函数中使用它。

像这样在顶部或构造函数中的某处初始化一个常量

const self = this;

然后在任何你想要的地方使用它，在这个对象发生变化的代码中。

const options: Highcharts.Options = {
  chart: {
    type: 'column'
  },
  title: {
    text: null
  },
  tooltip: {
      borderWidth: 0,
      style: {
          padding: 0
      },
      useHTML: true,
      formatter: function() {
          return '<div style="float:left">' +
        '<small>Hour ' + this.point.x + '</small>' +
        '</div>' +
        '<div style="float:left;">Production: <b>' + this.point.y + '%</b></div>' +
        '<div style="float:left;">Yield: <b>' + self.yieldCurrent + '%</b></div>' +
        '<div style="float:left;">Reject: <b>' + self.rejectCurrent + ' pcs.</b></div>' +
        '<div style="float:left;">Uptime: <b>' + self.uptimeCurrent + '%</b></div>';
      }
   }
}

希望对您有所帮助

Answer 2

您可以将组件引用保存在图表对象中，然后在 tooltip.formatter 函数中使用它。

在组件构造函数中保存组件引用：

  constructor() {
    const self = this;

    self.chartCallback = chart => {
      self.chart = chart;
      chart.chartComponent = self;
    };
  }

在tooltip.formatter中使用它：

tooltip: {
  formatter: function() {
    const chart = this.series.chart,
      chartComponent = chart.chartComponent;

    return this.y + " - " + chartComponent.yourProperty;
  }
}

演示：https://codesandbox.io/s/vmvylr0v2y

Javascript 打字稿中的回调。访问 class 成员和 javascript 'this' 参数

Javascript callbacks in Typescript. Accessing both class members and javascript 'this' parameter

typescript

highcharts

angular2-highcharts