Высокие диаграммы в области видимости angular с передачей ссылки на класс

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,
  ...
}

и мне нужны некоторые данные из сервиса, который используется этим компонентом, поэтому я могу получить к ним доступ, используя стрелку fun c для форматера:

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

Так что мне нужно, чтобы оба (данные и фильтры элементов диаграммы) выполняли нужные мне операции, но я не вижу способа получить их оба, только одно или другое, в зависимости от того, как я объявляю fun c.

Answer 1

Вы можете использовать функцию IIFE для сохранения ссылки на компонент:

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

---

Демонстрационная версия: http://jsfiddle.net/BlackLabel/6m4e8x0y/4808/