在 Angular 4 中实施一个指令以在主机上连续循环背景颜色

Question

我正在学习 angular 4 并想实现一个指令，使宿主元素的背景颜色循环显示数组中列出的 7 个颜色。理想情况下，我希望它是连续的。我不知道我需要挂接到哪个生命周期挂钩。这就是我现在所拥有的。目前，它甚至可见以一秒的间隔循环 7 一次，正如使用 SetTimeOut 所预期的那样。我已经注释掉 While 块，因为它只会挂起浏览器。

import {
  Directive,
  OnInit,
  HostBinding,
  Input
} from '@angular/core';


@Directive({
  selector: '[rainbowize]'
})
export class RainbowizeDirective {
  colors: Array<string>;

 @HostBinding('style.backgroundColor') bgColor: string;

  constructor() {
    this.colors = ['violet', 'indigo', 'blue', 'green', 'yellow', 'orange', 'red'];
 }

 ngOnInit(){
   let that = this;
   //while (true) {
      for (let i = 0; i < 7; i++) {
        console.log(that.colors[i]);
        setTimeout(function () {
          that.bgColor = that.colors[i];
        }, 1000)
      }
    //}
  }
}

html:

<h2 rainbowize >This is a raibowized paragraph</h2>

Answer 1

以下是您的操作方法：

ngOnInit() {
    let that = this;
    let counter = 0;
    let length = this.colors.length;

    upd();

    function upd() {
        that.bgColor = that.colors[counter % length];
        counter++;

        // some stopping condition here
        if (counter < 20) {
            setTimeout(upd, 1000);
        }
    }
}

这里最重要的是这一行：

that.colors[counter % length];

我使用模运算符 %，它 return 是整数除法后的余数。所以它将 return:

0%7 = 0
1%7 = 1
2%7 = 2
...
6%7 = 6
7%7 = 0  <---- here the sequence starts from the beginning
8%7 = 1

这将运行直到 counter 变量达到 Number.MAX_SAFE_INTEGER，即 9007199254740991。

另一种更简单的方法是执行以下操作：

    that.bgColor = that.colors[counter % length];
    counter++;

    if (counter === length) {
        counter = 0;
    }

或者使用循环链表

But I'm still not clear as to where my error lies? Is it because I have my code in the ngOnInit's main body as opposed to having it a function there?

您的代码问题与 Angular 无关。这是您要添加要在一秒钟内执行的所有回调。而且由于它们都执行得非常快，所以您只会看到最新的更改为红色。您可以这样修复它：

  for (let i = 0; i < 7; i++) {
    console.log(that.colors[i]);
    setTimeout(function () {
      that.bgColor = that.colors[i];
    }, 1000*i+1)
       ^^^^^^ --------------
  }

但现在的问题仍然是你的循环只执行一次，所以每个回调只安排一次。

在 Angular 4 中实施一个指令以在主机上连续循环背景颜色

Implementing a directive in Angular 4 to continuously cycle through background colors on host

angularjs-directive

lifecycle-hook

angular