Question

我想在Angular 2 App中使用Animations。我已经将“BrowserAnimationsModule”导入我的app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SharedService } from './shared.service';
import { routes } from './app.router';
import { AppRoutingModule } from './app-routing.module';

import { WinPageComponent } from './win-page/win-page.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    QuizShowStatusComponent,
    EntrancePageComponent,
    NavbarComponent,
    MainQuizComponent,
    WinPageComponent,
  ],
  exports: [
    MainQuizComponent
  ],
  imports: [
    BrowserModule,
    routes,
    AppRoutingModule,
    BrowserAnimationsModule

  ],
  providers: [SharedService],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是使用动画的component.ts的摘录：

import { Component, OnInit } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
import { SharedService } from '../shared.service';
import { Routes } from '@angular/router';
import { Router } from '@angular/router';
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';

@Component({
  selector: 'app-main-quiz',
  templateUrl: './main-quiz.component.html',
  styleUrls: ['./main-quiz.component.css'],
  encapsulation: ViewEncapsulation.None,
})

export class MainQuizComponent implements OnInit {

  constructor(private _sharedService: SharedService, private router: Router){
    this._sharedService = _sharedService;
  }

这是component.html的摘录

<div class="row">
          <div class="col-6">
            <button type="button" [@answerPanel]='stateButton1' class="btn btn-answer" id="answerButton1" (click)='checkQuestion($event)'>{{currentAnswer1}}</button>
          </div>

</div>

但它给我的错误

“找到合成属性@answerPanel。请在您的应用程序中包含”BrowserAnimationsModule“或”NoopAnimationsModule“。

谢谢你的帮助。

Answer 1

编辑：感谢您提供其他信息。我没有看到为该组件配置的动画。你的示例代码中是否缺少它？（以下示例）

@Component(
template: ` // template here`,
styleUrls: [ // styles here ],
animations: [
    trigger('answerPanel', [
      state('inactive', style({
        backgroundColor: '#eee',
        transform: 'scale(1)'
      })),
      state('active',   style({
        backgroundColor: '#cfd8dc',
        transform: 'scale(1.1)'
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('100ms ease-out'))
    ])
  ]
...

来源：https://angular.io/guide/animations

我假设您已经升级到Angular 4，因为您正在使用BrowserAnimationsModule。请注意最后一行：不推荐从@angular/core导入动画，应从@angular/animations导入。

来自4.0.0-rc1 change log：

如果您依赖动画，则还需要安装动画包@angular/animations并从根NgModule中的BrowserAnimationsModule导入新的@angular/platform-browser/animations。如果没有这个，您的代码将编译并运行，但动画将不会激活。不推荐使用@angular/core中的导入，使用新包import { trigger, state, style, transition, animate } from '@angular/animations';中的导入。

不能使用Animations Angular 2

1 个答案: