использовать сервис внутри функции

Question

Я использую старшие диаграммы и angular.

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

constructor(private translateService: TranslateService) {
}
private getOptions() {
  return {
    name: this.name,
    color: this.color,
    tooltip: {
      pointFormatter: function () {
        /* this line is my problem, how to use this.translateService here! */
        const myTranslation = translateService.instant('KEY', {value:this.y});
        return `<span>\u25CF</span> ${myTranslation}`;
      }
    },
  };
}

Answer 1

Вы можете использовать IIFE для хранения this из внешней области видимости:

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

---

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

Answer 2

Использование синтаксиса function() { } охватит this самой функции. Чтобы охватить this во внешней области - чтобы иметь возможность взаимодействовать со службой, объявленной вне функции - используйте функцию стрелки и вызовите this.translateService.

constructor(private translateService: TranslateService) {
}
private getOptions() {
  return {
    name: this.name,
    color: this.color,
    tooltip: {
      pointFormatter: () => {
        const myTranslation = this.translateService.instant('KEY', {value:this.y});
        return `<span>\u25CF</span> ${myTranslation}`;
      }
    },
  };
}

Вы уже используете this внутри функции, так что есть шанс, что вам придется исследовать другой способ получения this.y. Может быть, он передан как аргумент или может быть объявлен снаружи, и вы просто решили опустить его из вопроса как ненужную деталь?