Как получить доступ к переменным внешней области в функции щелчка в HighCharts

Question

Я использую Angular 7 вместе с HighCharts.Я передаю функцию в событие клика по старшим диаграммам, но мне также нужно получить доступ к некоторой переменной из компонента.

Вот код моего события:

events: {
        click: function (e: any) {
          console.log(this.xAxis[0].min)
          console.log(this.componentVariable)
        }
      } 

Я могуполучить доступ к значению xAxis, но не к переменной componentVariable, потому что она не существует в контексте.Я также не могу bind this к функции, потому что тогда у меня не будет доступа к xAxis.

Как я могу получить доступ к обеим переменным внутри функции обратного вызова click?

Здесь - простой пример моей проблемы.

Answer 1

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

export class AppComponent {
    constructor() {
        this.componentVariable = 15;

        this.options = {
            title: {
                text: 'simple chart'
            },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2],
            }],
            chart: {
                events: {
                    click: (function(component) {
                        return function(e: any) {
                            console.log(this.xAxis[0].min)
                            console.log(component.componentVariable)
                        }
                    })(this)
                }
            }
        };
    }
    options: Object;
    componentVariable: Number;
}

Демонстрационная версия: https://stackblitz.com/edit/angular-highcharts-gxaf3n?file=app/app.component.ts

Answer 2

Я не знаю много об Angular, но чтобы получить доступ к этому свойству внутри обратного вызова, вам нужно создать вспомогательную константу внутри конструктора и связать с ней this. Вот модифицированная версия вашего кода из stackblitz:

import { Component } from '@angular/core';

@Component({
    selector: 'simple-chart-example',
    template: `
        <chart [options]="options"></chart>
    `
})

export class AppComponent {
    componentVariable: Number; //Declaring your property
    constructor() {
        const that = this; //Creating the helper constant that can be used in callbacks to refer to the AppComponent's context
        this.componentVariable = 15; //Assigning a value to your property
        this.options = {
            title: {
                text: 'simple chart'
            },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2],
            }],
            chart: {
                events: {
                    click: function(e: any) {
                        console.log(this.xAxis[0].min);
                        console.log(that.componentVariable); //Using the helper constant to access your declared property
                    }
                }
            },
        };
    }
    options: Object;
}