jQueryのangular2変数へのアクセス

Question

私はangular2プロジェクトでいくつかのことにjQueryを使用しています。しかし、私はangle2で宣言した変数をjQueryで使用することはできません。私は次のようなものを持っています：

export class AddExerciseComponent implements OnInit { 

    parameters:Array<string> = ["FU"]; 

    constructor() { } 

    ngOnInit() { 


    $('.chips').on('chip.add', function(e, chip){ 
     this.parameters.push(chip.data); 
     console.log(this.selectedValue); 
    }); 
} 

これは、パラメータが定義されていないというエラーが表示されます。私はthisを使っているからだと思います。他に何ができますか？

Answer 1

thisを有効範囲内に保つには、（() => {}）の矢印関数式を使用する必要があります。試してみてください：あなたが定期的に古い関数としてコールバックを渡されると

export class AddExerciseComponent implements OnInit { 

parameters:Array<string> = ["FU"]; 

constructor() { } 

ngOnInit() { 
// removed function keyword and added() => {} syntax 
    $('.chips').on('chip.add', (e, chip) => { 
    this.parameters.push(chip.data); 
    console.log(this.selectedValue); 
    }); 
} 

、JavaScriptは、あなたのコールバックが呼び出し元の関数の範囲内であることを考慮していない、あなたはあなたが思っていたスコープからデータを呼び出すために使用できないthisを残しますArrow関数を使用すると、スコープが保存され、期待通りにデータにアクセスするためにthisを使用できます。

Answer 2

あなたが戻ってON-完全な関数呼び出しjqueryのアニメーションで、角度の変数を使用することを探しているなら、それはあなたがそれを行う方法は次のとおりです。

$('#myDiv').animate({top: 70+"%"},{ 

    queue: false, 
    duration: 1000, 
    complete:() => { 

    //this is you angular variable of the class 
     this.angularVar = 0; 
     $("#myDiv").hide(); 

    //this is you angular variable of the class  
     this.showAnimation = false; 

    //this is you angular class function 
     this.angularFunction(); 

     console.log("animation complete"); 
    } 
});