当我们点击highchart系列时调用角度分量方法 [英] Call an angular component method when we click on highchart series

问题描述

我使用angular2-highcharts，我想在本地函数中调用一个组件方法，但我不知道它是如何可能的。

I use angular2-highcharts and I want to call a component method in a local function but I don't know how it could be possible.

你能帮我吗？

例如：
http：// plnkr。编辑/ gOLGytp9PZXiXvv2wv1t？p =预览版

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule, Component }    from '@angular/core';
import { BrowserModule }          from '@angular/platform-browser';
import { ChartModule }            from 'angular2-highcharts';

@Component({
    selector: 'my-app',
    styles: [`
      chart {
        display: block;
      }
    `],
    template: `<chart [options]="options"></chart>`
})
class AppComponent {
    constructor() {
        this.options = {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title : { text : 'simple chart' },
            plotOptions: {
                series: {
                    turboThreshold:3000,
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                console.log(this);
                                // I want to call a component method here
                            }
                        }
                    }
                }
            },
            series: [{
                name: 'Brands',
                colorByPoint: true,
                data: [{
                    name: 'Microsoft Internet Explorer',
                    y: 56.33
                }, {
                    name: 'Chrome',
                    y: 24.03,
                    sliced: true,
                    selected: true
                }, {
                    name: 'Firefox',
                    y: 10.38
                }, {
                    name: 'Safari',
                    y: 4.77
                }, {
                    name: 'Opera',
                    y: 0.91
                }, {
                    name: 'Proprietary or Undetectable',
                    y: 0.2
                }]
            }]
        };
    }
    options: Object;

    methodToCall(){
        console.log("Method called");
    }
}

@NgModule({
    imports:      [BrowserModule, ChartModule.forRoot(require('highcharts'))],
    declarations: [AppComponent],
    bootstrap:    [AppComponent]
})
class AppModule { }


platformBrowserDynamic().bootstrapModule(AppModule);

推荐答案

要访问click事件返回的信息也可以访问你的组件方法，你可以这样做：

To have access to the informations that the click event returns and also have access to your component methods you can do something like this:

plotOptions: {
            series: {
                turboThreshold:3000,
                cursor: 'pointer',
                point: {
                    events: {
                        click: function(e){
                           const p = e.point
                           this.myComponentMethod(p.category,p.series.name);
                        }.bind(this)
                    }
                }
            }
        },

我希望这会有帮助。

这篇关于当我们点击highchart系列时调用角度分量方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！