Question

我正在尝试使用setInterval：class SignupComponent 所以，function（）{}可以将值更改为类的2个变量，这些变量超出了function（）{}的范围，但是类SignupComponent的内容并且我失败了。我正在使用setInterval，所以我可以循环激活一些动画。这是代码：

export class SignupComponent  {
      state = 'normal';
      state2 = 'normal';
      v1 = 0;
      myFunc = function (p1){setInterval(function(){
           p1++;
           if (p1%4==0)
        {
            console.log(this.state2);
            this.state == 'normal' ? this.state = 'disappear': this.state
               = 'normal';
            this.state2 == 'normal' ? this.state2 = 'appear': this.state2
               = 'normal' 
        }
    }, 1000)};

问题是this.state，this.state2里面的setInterval（function（）{....} 不要在范围之外引用州，州2，而是在班级的范围内。为什么我不能这样做呢？有没有办法连接这些变量，所以值会更新？

Answer 1

只需使用箭头函数() => {}代替function() {}即可使this指向当前的类实例

myFunc = function (p1){setInterval(() => {

Answer 2

应该以这种方式调用

setTimeout / setInterval（对于angular用户）：

export class demo implements OnDestroy{
   private _setTimeoutHandler: any;
   private _setIntervalHandler: any;

   mymethod1(){
       this._setTimeoutHandler = setTimeout(() => {
       // my to do 
       }, 100);
   }

   mymethod2(){
      this._setIntervalHandler = setInterval(() => { 
          myTimer() 
     }, 100);
   }


   ngOnDestroy() {
      clearTimeout(this._setTimeoutHandler)}
      clearInterval(this.__setIntervalHandler);
   }
}

在angular 2 Component

2 个答案: