setTimeout()的调用逻辑有些错误:
this.changeColor = function(){
setTimeout(function(){
this.color = this.getRandomColor();
} , 1000);
this.changeColor(); //错误地递归了....
}
应当改为:
var self = this; //保存this对象
this.changeColor = function(){
self.color = self.getRandomColor(); //self指向EzApp实例
setTimeout(self.changeColor, 1000); //定时启动下一次
}
不过对于定时任务,使用setInterval()函数更合理一些:
import {Component} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";
@Component({
selector:"ez-app",
template:`<h1 [style.color]="color">Hello,Angular2</h1>`
})
class EzApp{
constructor(){
this.color = "red";
var self = this;
setInterval(function(){
self.color = '#'+(Math.random()*0xffffff<<0).toString(16);
},1000);
}
}
bootstrap(EzApp);
如果使用lambda表达式来写匿名函数,会更简单:
import {Component} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";
@Component({
selector:"ez-app",
template:`<h1 [style.color]="color">Hello,Angular2</h1>`
})
class EzApp{
constructor(){
this.color = "red";
setInterval(()=>{
this.color = '#'+(Math.random()*0xffffff<<0).toString(16);
},1000);
}
}
bootstrap(EzApp);