C3 js ..角度2 Typescript c3.generate内の外部関数を呼び出す？

Question

私はこの1つの問題をしばらく検索して取り組んできましたが、問題の内容がわかりません。角かc3かどうかはわかりません。

私は同じコンポーネント内のc3.generate関数内で自分のメソッドを呼び出すことはできません。

c3チャートがテンプレートから呼び出され、完全に機能します。私はテンプレート内のボタンを使ってsomethingMethod（）をテストしています。

私はsomethingMethod（）をc3 onclick関数で呼び出せますが、機能しません。 this.someTypeTitle = 'asda'もロードされません。 しかしアラートが働くので、私は範囲外ですが、それを修正する方法が正確にはわからないと思っています。

@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

誰も私の質問に答えなかったので、私はそれを自分で考え出したからです。変数を先に宣言しなければならなかった、var = this;私が望んでいた関数をその関数で参照してください。

明らかに、これはonclick内でc3/d3要素を参照してください。

Answer 2

実際問題として、この問題は角度2またはC3 それ自体とは関係ありません。です。これはECMAScriptでthisを変更する警告です。

の中のthisの機能がクラスインスタンスを指していません。関数はC3に渡されるので、C3は異なる文脈でそれを呼び出す。そのため、のonclickの中にある関数は、クラスインスタンスではなく要素を参照します。これは、イベントのコールバックの典型的な動作です。

はそれを防ぐために、あなたは、 矢印機能この字句 を持ってを使用する必要があります。つまり、矢印関数の内部にある thisは、どのコンテキストで呼び出されても問題ありません。このような

使用矢印機能：

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]); 
} 

あなたはarrow functions on MDNについての詳細を読むことができます。