我使用 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);
最佳答案
要访问点击事件返回的信息并访问您的组件方法,您可以这样做:
plotOptions: {
series: {
turboThreshold:3000,
cursor: 'pointer',
point: {
events: {
click: function(e){
const p = e.point
this.myComponentMethod(p.category,p.series.name);
}.bind(this)
}
}
}
},
希望对您有所帮助。
关于angular - 当我们点击 Highcharts 系列时调用一个 Angular 组件方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44045016/