関数に結び付く

Question

私はこのコードをここに持っています。それはちょっと面倒ですので、後で私はそれを思い出すことができます。関数は、テキストの配列とModelとおそらくはタイマーを取ります。設定した時間が経過すると、テキストを回転してモデルの値を変更しようとします。私は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感謝。あなたがやっているような論理作業をするためには使用しないでください。

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