angular2-beta-模板基本语法-event事件绑定-文本每秒变化一次随机颜色不会写

0

不知道该如何在angular2中写每秒变换文本颜色 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"; this.getRandomColor = function(){ return '#'+(Math.random()*0xffffff<<0).toString(16); } this.changeColor = function(){ setTimeout(function(){ this.color = this.getRandomColor(); } , 1000); this.changeColor(); } this.changeColor(); } } bootstrap(EzApp); 我写的不知道错在哪里?

  • 3
    ciga 99个月前 回答

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




    最佳答案
  • 1
    zxy20xx@163.com 99个月前 回答
    import {Component} from "angular2/core"; 
    import {bootstrap} from "angular2/platform/browser"; @Component({ selector:"ez-app", 
                                                                                                              template:`<h1 [style.color]="color" (click)="onClick()">Hello,Angular2</h1>` }) 
    class EzApp{ constructor()
                { 
                  this.color = "red";
                  this.onClick=function(){ this.color='#'+(Math.random()*0xffffff<<0).toString(16);}
                } 
               }

    bootstrap(EzApp);
    利用你的代码写了一个点击变色,setTimeout方法似乎不能正常使用。知道什么原因请告诉我