javascript - Angular 2.0 ngClass 未在超时时更新

Question

我正在使用 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);
  })();
}

Plnkr

因为我在我的应用程序中使用动画，所以我想延迟触发类更改。为此，我使用了 setTimeout。

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

提前谢谢你们。

Answer 1

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

-------------------------------------------- ---原答案-------------------------------------------- ------------------我认为您提出了一个很好的问题。

我想不通到底是为什么，但问题出在立即函数上。

一旦你声明了你的函数而不是在声明中立即运行它。它有效。

是的，还有一件事:setTimeout 似乎搞砸了“这个”...

我在 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);
  };

}