關係到一個函數

Question

我在這裏有這段代碼，它有點凌亂，所以我想把它縮小到一個函數，所以後來我可以記得它。該函數應該包含一個文本和一個模型數組，也許是一個計時器。它會嘗試旋轉文本並在一段時間後更改模型的值。我是Angular 2的新手，所以我不確定哪種方法是最好的。

import { 
    Component, OnInit, 
    trigger, state, animate, transition, style 
} from '@angular/core'; 

@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    animations: [ 
    trigger('visibilityChanged', [ 
     state('true' , style({ opacity: 1, transform: 'scale(1.0)' })), 
     state('false', style({ opacity: 0, transform: 'scale(0.0)' })), 
     transition('1 => 0', animate('500ms')), 
     transition('0 => 1', animate('900ms')) 
    ]) 
    ] 
}) 
export class HomeComponent implements OnInit { 
    fancyText: string; 
    isVisible : boolean = true; 

    constructor() { 
    var textArr = ['Fancy', 'Text', 'Blinking', 'Alot'] 
    var curNewsIndex = 0 
    this.fancyText = textArr[curNewsIndex] 
    setInterval(() => { 
     ++curNewsIndex 
     if (curNewsIndex >= textArr.length) { 
      curNewsIndex = 0 
     } 
     this.isVisible = !this.isVisible 
     setTimeout(() => { 
     this.fancyText = textArr[curNewsIndex] 
     this.isVisible = !this.isVisible 
     }, 500) 
    }, 2000) 
    } 

    ngOnInit() {} 
} 

感謝您提前

Answer 1

使用constructor僅用於初始化你的模型。不要用它來做任何像你一樣的邏輯工作。 而是使用ngOnInit塊：

export class HomeComponent implements OnInit { 
     fancyText: string; 
     isVisible : boolean = true; 
     textArr :Array<string>; 

     constructor() { 
     this.textArr = ['Fancy', 'Text', 'Blinking', 'Alot']; 
     } 

     ngOnInit() { 
     funcToTie(textArr){ 
     this.textArr = textArr; 
      var curNewsIndex = 0; 
      this.fancyText = this.textArr[curNewsIndex]; 
      setInterval(() => { 
      ++curNewsIndex 
      if (curNewsIndex >= this.textArr .length) { 
       curNewsIndex = 0 
      } 
      this.isVisible = !this.isVisible 
      setTimeout(() => { 
      this.fancyText = this.textArr[curNewsIndex] 
      this.isVisible = !this.isVisible 
      }, 500) 
     }, 2000); 
    } 
    } 
    }