C3 js .. Angular 2 Typescript Aufruf externe Funktion innerhalb c3.generate?

Question

Ich habe dieses eine Problem für eine Weile gesucht und gearbeitet, aber ich bin mir nicht sicher, was das Problem ist .. Nicht sicher, ob es mit eckigen oder c3 ist.

Aus irgendeinem Grund kann ich meine Methode innerhalb der c3generate-Funktion nicht aufrufen, die sich in derselben Komponente befindet.

Das c3-Diagramm wird aus der Vorlage aufgerufen und es funktioniert einwandfrei. Ich habe meine somethingMethod() mit einem Button in der Vorlage getestet und es funktioniert.

Ich möchte in der Lage sein, die somethingMethod() mit der Onclick-Funktion c3 aufrufen, aber es funktioniert nicht. Es lädt nicht einmal this.someTypeTitle = 'asda'; Aber eine Warnung funktioniert, also denke ich, dass ich außerhalb des Umfangs bin, aber nicht genau weiß, wie ich es beheben kann.

@Component({ 
    selector: 'something', 
    templateUrl: 'something.component.html', 

}) 
export class SomethingComponent{ 

    someTypeTitle: string; 

    getData(input: string): Array<number>{ 
     return data; 
    } 

    somethingMethod(input: string){ 
     someTypeTitle = input; 
    } 

    getChart() { 
     var chart = c3.generate({ 
      bindto: '#stackedbar', 

      data: { 
       x: 'x', 
       columns: [ 
        this.getData(someString), 
        this.getData(someString) //These work 
       ], 

       onclick: function (d, e) { 
        alert(this.internal.config.axis_x_categories[d.x]); // This works 
        this.someTypeTitle="asdad"; //This doesn't work. 
        this.someTypeTitle= this.internal.config.axis_x_categories[d.x]; //This doesn't work. 
        this.somethingMethod(this.internal.config.axis_x_categories[d.x]); //This doesn't work. 

       }, 
}... 

Answer 1

Uhh da niemand meine Frage beantwortet habe, habe ich es selbst herausgefunden. Ich musste eine Variable früher deklarieren, var that = this; und verweise die Funktionen, die ich wollte mit dem.somethingMethod();

Anscheinend bezieht sich dieser innerhalb onclick auf die c3/d3 Elemente.

Answer 2

als eine Angelegenheit der Tatsache, dieses Problem hat nichts mit kantigen 2 oder C3 per se, es ist eine Einschränkung der Änderung this in ECMAScript zu tun.

Das Problem ist this innerhalb der onclick Funktion zeigt nicht auf Ihre Klasseninstanz. Da die Funktion an C3 übergeben wird, ruft C3 sie in einem anderen Kontext auf. Aus diesem Grund bezieht sich this innerhalb der onclick Funktion auf das Element anstelle Ihrer Klasseninstanz. Dies ist ein typisches Verhalten für Rückrufaktionen von Ereignissen.

Um das zu verhindern, sollten Sie eine Pfeil Funktion die lexikalischer diese hat verwenden. Das bedeutet this innerhalb der Pfeilfunktion bleibt unverändert, egal in welchem ​​Kontext es aufgerufen wird.

Pfeil Funktion wie folgt aus:

onclick: (d, e) => { 
    this.someTypeTitle = "asdad"; 
    this.someTypeTitle = this.internal.config.axis_x_categories[d.x]; 
    this.somethingMethod(this.internal.config.axis_x_categories[d.x]); 
} 

Sie können mehr über arrow functions on MDN lesen.