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函数中的两个变量？

Here是我的问题的一个简单示例。

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;
}

如何在HighCharts中的click函数中访问外部范围变量

2 个答案: