angular - Angular 2 动画错误

Question

我尝试用 Angular 制作一个简单的动画：

import { Component, animate, trigger, state, style, transition } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('divState', [
      state('normal', style({
        'background-color': 'red',
        transform: 'translateX(0)'
      })),
      state('highlighted', style({
        'background-color': 'blue',
        transform: 'translateX(100px)'
      })),
      transition('normal <=> highlighted', animate(300))
    ])
  ]
})


export class AppComponent {
  private state;

  constructor(){
    this.state = 'normal';
  }

  onAnimate() {
    this.state == 'normal' ? this.state = 'highlighted' : this.state = 'normal';
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div>
    <button (click)="onAnimate()">Switch</button>
</div>
<div style="height: 20px">
<div 
    style="width: 100px; height: 100px" [@divState]="state">
</div>

但是，如果我单击按钮，它会说：

未捕获的 ReferenceError：onAnimate 未在 HTMLButtonElement.onclick 中定义（（索引）：13）

有人知道那里有什么问题吗？

编辑：按钮现在可以工作，但动画仍然失败，div 也没有出现。

Answer 1

你必须导入你的状态依赖。

import {style,animate,state,keyframes } from '@angular/core';

运气！

Answer 2

您应该在这里使用事件绑定：

<button (click)="onAnimate()">Switch</button>

查看教程以获取有关事件绑定的更多详细信息：https ://angular.io/docs/ts/latest/guide/user-input.html

Answer 3

它应该如下所示。使用(click)而不是 (onclick) ，因为 angular 2 将触发 zone() 触发异步实现的更改检测（事件 clicks ， XHR ， ）

<div>
    <button (click)="onAnimate()">Switch</button>
</div>