Angular 2，动画触发器尚未注册

Question

这是我第一次使用 Angular 2 动画，我在实现方面遇到了一些问题。我使用了 Angular 指南，但出现以下错误:

ERROR Error: The provided animation trigger "menubarState" has not been 
registered!
at AnimationTransitionNamespace._getTrigger (transition_animation_engine.js:239)
at AnimationTransitionNamespace.trigger (transition_animation_engine.js:262)
at TransitionAnimationEngine.trigger (transition_animation_engine.js:896)
at InjectableAnimationEngine.AnimationEngine.process (animation_engine_next.js:146)
at AnimationRenderer.setProperty (animation_renderer.js:500)
at DebugRenderer2.setProperty (services.js:1206)
at setElementProperty (element.js:386)
at checkAndUpdateElementValue (element.js:308)
at checkAndUpdateElementInline (element.js:243)
at checkAndUpdateNodeInline (view.js:468)

我的组件代码:

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

@Component({
  selector: "rendez-vous",
  templateUrl: "./composants/rendezVous/rendezVous.html",
  styleUrls: ["./composants/rendezVous/rendezVous.css"],
  animations: [
    trigger("menubarState", [
    state('in', style({height: '*'})),
    transition('* => void', [
      style({height: '*'}),
    animate(250, style({height: 0}))
    ])
  ])]
})
export class rendezVousComposant {

etatAffichage : string = "off";

gestionAffichage () {
  this.etatAffichage = 'in';
}
}

我的 html 代码:

<div class="rendezVous">
<div (ngClick)="gestionAffichage()">Afficher</div>
<div [@menubarState]="etatAffichage">...</div>
</div>

我的依赖:

"dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.4.0",
    "systemjs": "^0.20.13",
    "zone.js": "^0.8.12"
    },
    "devDependencies": {
    "@types/core-js": "^0.9.41"
}

谢谢你的帮助

Answer 1

我也遇到过这个问题，那只是一个错字。

我将 trigger 声明为 fade 并在 face 等模板中使用

export let fade = trigger('fade', [
    transition(':enter', [
        style({ opacity: 0 }),
        animate(2000)
    ])
])

// here it was the mistake
<div @face></div>

这就是我收到此错误的原因。