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

Question

这是我第一次使用角度2动画，我对实现有一点问题。我使用角度指南，但我有以下错误：

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

我也遇到过这个问题，这只是一个简单的语法错误。

我宣布触发器的名称为淡出，并在模板中使用，如 face

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

<div @face></div>

这就是我遇到这个错误的原因。

Answer 2

尝试使用truthy分配触发器声明，如布尔值。正如他们在官方教程中所做的那样，您可以找到@Angular.IO。与组件中的menubarState = true类似。

Answer 3

您的组件中缺少以下内容：

@Output() menubarState: string;

或者您的意思是etatAffichage而不是menubarState

你需要为动画做三件事：

1）添加animations和状态触发器 - 您已经完成了 2）在HTML上添加输出绑定 - 你做了div [@menubarState]="etatAffichage"> 3）缺失：定义@Output menubarState

然后你需要根据状态触发器将menubarState的状态更改为各种值。

Answer 4

模板中使用的名称必须是定义为字符串的名称，而不是属性名称或导出名称。

所以这里我有一个属性fadeInOutAnimation，但是触发器实际上叫做fadeAnimation。

因此，您必须在模板中使用[@fadeAnimation]，而不是[@fadeInOutAnimation]。对于他们来说，尽可能地匹配是一种最佳实践。