Javascript angular 2.0 ngClass在超时时不更新

我用的是Angular 2.0 beta 15

最初，我在开发应用程序时遇到了这个问题。然后我决定尝试最简单的方法来复制它。请参见下面的代码

//our root app component
import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2 [ngClass]="{'red-heading':isAlertOn, 'blue-heading':!isAlertOn}">Hello {{name}}</h2>
    </div>
  `,
  directives: []
})
export class App {
  isAlertOn:boolean;

  constructor() {
    this.name = 'Angular2';
    this.isAlertOn = false;
  }

  (function(){
    setTimeout(function(){
      console.log("in here");
      this.isAlertOn = true;
    },2000);
  })();
}

//我们的根应用程序组件
从'angular2/core'导入{Component}
@组成部分({
选择器：“我的应用程序”，
提供者：[]，
模板：`
你好{{name}
`,
指令：[]
})
导出类应用程序{
伊萨勒顿：布尔；
构造函数（）{
this.name='Angular2'；
this.isAlertOn=false；
}
（功能（）{
setTimeout（函数（）{
console.log（“在此登录”）；
this.isAlertOn=true；
},2000);
})();
}

因为我在我的应用程序中使用动画，所以我想延迟更改类。为了做到这一点，我使用setTimeout

我已经读到，一般来说，所有的更改都是由NgZone手动处理的（我认为对于一些较旧的alpha版本）。现在这些变化应该是自动处理的。要么我遗漏了一些东西（angular 2.0中仍然是新的），要么可能有不同的方法

提前感谢各位。

------------------------------------最新更新2016-04-26 15:28-------------------------------------------

好的，我只是想知道如何使用CSS动画：

在css中，执行以下操作：

@keyframes blueToRed{
  0% {color: blue}
  100% {color:red;}
}

.blue-to-red-heading {
  animation-name: blueToRed;
  animation-duration: 2s;
  /*animation-delay:2s; */ /*uncomment this for delays*/
  animation-fill-mode: forwards;
}

然后在app.ts中

//our root app component
import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2 [ngClass]="{'blue-to-red-heading':isAlertOn}">Hello {{name}}</h2>
    </div>
  `,
  directives: []
})
export class App {
  isAlertOn:boolean;

  constructor() {
    this.name = 'Angular2';
    this.isAlertOn = true;
  }
}

//我们的根应用程序组件
从'angular2/core'导入{Component}
@组成部分({
选择器：“我的应用程序”，
提供者：[]，
模板：`
你好{{name}
`,
指令：[]
})
导出类应用程序{
伊萨勒顿：布尔；
构造函数（）{
this.name='Angular2'；
this.isAlertOn=true；
}
}

--------------------------------------------------原始答案------------------------------------------------------------- 我想你有一个很好的问题

我不知道确切的原因，但问题在于直接功能

一旦您声明了您的函数，而没有立即在声明中运行它。它起作用了

是的，还有一件事：设置超时似乎把“这个”搞砸了

我在app.ts上做了什么：

//our root app component
import {Component, OnInit} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2 [ngClass]="{'red-heading':isAlertOn, 'blue-heading':!isAlertOn}">Hello {{name}}</h2>
    </div>
  `,
  directives: []
})
export class App {
  isAlertOn:boolean;

  constructor() {
    this.name = 'Angular2';
    this.isAlertOn = false;
    this.setAlert();
  }

  ngOnInit() {
   // this.setAlert(); //this works the same way
  }

  setAlert(){ 
    let component = this;

    setTimeout(function(){
      console.log("in here");
      component.isAlertOn = true;
    },2000);
  };

}

//我们的根应用程序组件
从'angular2/core'导入{Component，OnInit}
@组成部分({
选择器：“我的应用程序”，
提供者：[]，
模板：`
你好{{name}
`,
指令：[]
})
导出类应用程序{
伊萨勒顿：布尔；
构造函数（）{
this.name='Angular2'；
this.isAlertOn=false；
这个.setAlert（）；
}
恩戈尼尼特（）{
//this.setAlert（）；//其工作方式相同
}
setAlert（）{
让分量=这个；
setTimeout（函数（）{
console.log（“在此登录”）；
component.isAlertOn=true；
},2000);
};
}

我更新了plnkr，使其不使用自调用功能，而是执行单击时间。这是最接近我所拥有的。setTimeout是在我按下按钮后执行的。我想如果你在构造函数中执行它，应该没问题。将其绑定到click事件。您还可以将其放入ngOnInit（）中，我认为这更干净。我正在考虑使用CSS动画来做这件事。稍后我会把一些更新。也可以作为参考你，我的朋友，是个很棒的家伙：）。我想问题肯定出在“this”上。动态更新类可以使用以下语法实现：

。它的行为类似于angular 1中的两个数据绑定

ng类

。检查本教程：