1

我正在学习角度 4，并希望实现一个指令，该指令导致宿主元素的背景颜色在数组中列出的 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>
4

1 回答 1

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];

我使用模运算符%，它在整数除法后返回余数。所以它会返回：

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

或者使用循环链表。

但是我仍然不清楚我的错误在哪里？是因为我在 ngOnInit 的主体中有我的代码，而不是在那里有一个函数吗？

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

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

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

于 2017-06-07T16:47:34.917 回答