我使用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)
}
}
}
},
我希望这将有所帮助.
