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初始化模型。不要像你一样用它做任何逻辑工作。而是使用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);
   }
    }
    }

绑定到一个功能

1 个答案: