在angular 2中使用setInterval函數組件

Question

我試圖在裏面使用setInterval：class SignupComponent 因此，function（）{}可以將值更改爲函數（）{}的outscope類的2個變量， class 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（函數（）{....} 不指狀態，狀態2的範圍，但在他類的範圍。我爲什麼不能這樣做封閉？ 是否有連接這些夫婦瓦爾這麼值將被更新的方式？

Answer 1

只需使用箭頭功能的() => {}代替function() {}使this指向當前類實例

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

Answer 2

的setTimeout/setInterval的應該以這種方式被稱爲（角度用戶）：

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