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版本）。现在应该自动处理这些更改。要么我错过了某些东西（在角度2.0中仍然是新的），或者可能有不同的方法。

先谢谢你们。

Answer 1

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

好的，我只想弄清楚使用CSS动画的方式：

css中的

执行此操作：

public static void main(String args[]) {

        Scanner scanner = new Scanner(System.in);

        System.out.println("Please enter your name to begin:");
        String name = scanner.nextLine();
        System.out.println("Hello " + name + "!");

        System.out.println("Please enter your age:");
        int age;
        while (true) {
            try { // Try to read in the age.
                age = scanner.nextInt();
            } catch (InputMismatchException ex) { // The input wasn't a valid integer; parsing the value failed.
                System.out.println("Please enter an integer:");
                continue; // Attempt reading the age again.
            }
            break; // The input was a valid integer. Break out of the loop.
        }

        scanner.close();

        System.out.println("You've entered a valid age");
    }
}

然后在app.ts

@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;
}

----------------------------------------------- ---原始答案--------------------------------------------- ---------------- 我认为你有一个很好的问题。

我无法弄清楚原因究竟是什么，但问题在于即时功能。

声明函数后立即声明您的函数。它有效。

还有一件事：setTimeout似乎弄乱了“这个”......

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

角度2.0 ngClass在超时时不会更新

1 个答案: