单击highchart系列时调用角度分量方法

发布时间：2020-12-17 17:43:03 所属栏目：安全来源：网络整理

导读：我使用angular2-highcharts,我想在本地函数中调用组件方法,但我不知道它是如何可能的. 你可以帮帮我吗？一个掠夺者的例子： http://plnkr.co/edit/gOLGytp9PZXiXvv2wv1t?p=preview import { platformBrowserDynamic } from '@angular/platform-browser-dyn

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

你可以帮帮我吗？

一个掠夺者的例子：
http://plnkr.co/edit/gOLGytp9PZXiXvv2wv1t?p=preview

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事件返回的信息并且还可以访问组件方法,您可以执行以下操作：

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

我希望这将有所帮助.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!