角2動畫錯誤

Question

我試圖做一個簡單的動畫與角：

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> 

但是，如果我按一下按鈕它說：

Uncaught ReferenceError: onAnimate is not defined at HTMLButtonElement.onclick ((index):13)

有誰知道那裏出了什麼問題？

編輯：按鈕現在可以工作，但動畫仍然失敗，div也不顯示。

Answer 1

它應該如下。使用(click)，而不是（的onclick），因爲角2將觸發區（），它觸發異步實現變化檢測（點擊事件，XHR）

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

Answer 2

你應該用事件綁定的位置：

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

有關事件的詳細信息結合

檢查教程：https://angular.io/docs/ts/latest/guide/user-input.html

Answer 3

必須導入狀態依賴。

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

好運！