Ajout d'écouteurs à Amcharts avec Angular4

Question

J'essaye d'obtenir une fonctionnalité de recherche en avant sur un Amcharts Piechart dans mon projet angular4. Le official wrapper dispose d'une fonctionnalité permettant d'ajouter un écouteur dans l'objet de configuration. Cet objet de configuration est ensuite transmis à AmChartsService pour créer le graphique.

Mon problème est ici:

import { AmChartsService } from "@amcharts/amcharts3-angular"; 

@Component({ 
    template: `<div id="chartdiv" [style.width.%]="100" [style.height.px]="500"></div>` 
}) 
export class AppComponent { 
    private chart: any; 

    constructor(private AmCharts: AmChartsService) {} 

    public whatever(){} 

    ngOnInit() { 
    this.chart = this.AmCharts.makeChart("chartdiv", { 
     "type": "pie", 
     "theme": "light", 
     "dataProvider": [], 
     "listeners": [{ 
       event: 'clickSlice', 
       method: function(event) { 
        this.whatever()<--- HERE 
       } 
     }], 
     ... 
    }); 
    } 
} 

Je ne suis pas en mesure d'appeler une méthode en dehors du cadre de la fonction javascript. Leur tutorial montre qu'il est fait de cette manière exacte en utilisant javascript mais aucune indication sur la façon de l'atteindre dans un scénario comme le mien. L'appel d'une fonction externe est essentiel pour modifier dynamiquement la balise du fournisseur de données en fonction du clique-souris cliqué. Notez que dans la fonction javascript, je suis capable d'appeler console.log() (ne fonctionne pas en dehors de sa portée).

Ci-dessous est l'erreur à afficher sur la console du navigateur:

zone.js:169 Uncaught TypeError: Cannot read property 'Call' of undefined 
    at breakdown-chart.component.ts:51 
    at b.a.inherits.b.fire (amcharts.js:3) 
    at b.clickSlice (pie.js:10) 
    at SVGGElement.<anonymous> (pie.js:5) 
    at SVGGElement.wrapFn [as __zone_symbol___onmouseup] (zone.js:1199) 
    at ZoneDelegate.webpackJsonp.695.ZoneDelegate.invokeTask (zone.js:398) 
    at Zone.webpackJsonp.695.Zone.runTask (zone.js:165) 
    at SVGGElement.ZoneTask.invoke (zone.js:460) 

Merci!

Answer 1

Vous pouvez définir this sur une variable, puis y faire référence ultérieurement.

import { AmChartsService } from "@amcharts/amcharts3-angular"; 

@Component({ 
    template: `<div id="chartdiv" [style.width.%]="100" [style.height.px]="500"></div>` 
}) 
export class AppComponent { 
    private chart: any; 

    constructor(private AmCharts: AmChartsService) {} 

    public whatever(){} 

    ngOnInit() { 
    // Set this to that 
    let that = this; 

    this.chart = this.AmCharts.makeChart("chartdiv", { 
     "type": "pie", 
     "theme": "light", 
     "dataProvider": [], 
     "listeners": [{ 
      event: 'clickSlice', 
      method: function(event) { 
       // Use that to refer to this 
       that.whatever(); 
      } 
     }], 
     ... 
    }); 
    } 
}