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

因为我在我的应用程序中使用动画，所以我想延迟触发 class 变化。为此，我正在使用 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 似乎搞砸了 "this"...

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

}

Answer 2

你也可以用 SCSS 实现，不需要 JS:

@keyframes highlight {
  0% {
    background-color: blue;
  }
  100% {
    background-color: red;
  }
}

@for $i from 0 through 20 {
  $duration: 1s + $i;

  .highlight-#{$i} {
    animation-name: highlight;
    animation-duration: $duration;
    animation-fill-mode: forwards;
  }
}

然后添加对应的highlight-1,2,3,等等类.

angular 2.0 ngClass 未在超时时更新

angular 2.0 ngClass is not updated on timeout

javascript

angular

ng-class