Question

我在angular2项目中使用jQuery进行了一些操作。但我无法使用我在angular2中声明的变量来在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无法用于从您认为自己所在的范围调用数据。通过使用箭头功能，可以保存范围，this可用于按预期访问数据。

Answer 2

如果你想在jquery中使用角度变量动画ON-Complete函数回调，那就是你如何做到的：

$('#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");
  }
});

Answer 3

将angular的 this （实例）分配给Jquery的 this （实例）以在JQuery中使用angular变量

let jQueryInstance = this; // This line will assign all the angular instances to jQueryInstance variable.
$('.chips').on('chip.add', (e, chip) => { 

    /* this.parameters.push(chip.data); */

    // Instead of the above line we have to use like below
    jQueryInstance.parameters.push(chip.data); // instead of "this", "jQueryInstance" is used

    // console.log(this.selectedValue);
    console.log(jQueryInstance.selectedValue);
  });

访问jquery中的angular2变量

3 个答案: