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"
}

感谢您的帮助。

- Flo

Answer 1

我也遇到了这个问题，原来只是一个拼写错误。

我将触发器命名为fade，但在模板中使用时写成了face。

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

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

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

- WasiF

---

不想挑剔，这是语法错误还是打字错误？ - Ya.

@Ya。谢谢，这是打字错误。 - WasiF

谢谢，我输入了'blockFade'和'blockfade'，结果一样，你的评论帮助我意识到这只是个拼写错误 :) - Aditya Mittal

Answer 2

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

在这里我有一个属性fadeInOutAnimation，但实际上触发器被称为fadeAnimation。

因此，在模板中必须使用[@fadeAnimation]，而不是[@fadeInOutAnimation]。最好尽可能匹配它们，这可能是最佳实践。

- Simon_Weaver

---

这正是我的情况。 - afruzan

Answer 3

尝试使用真值（如布尔值）分配触发器声明。就像官方教程中所做的那样，您可以在@Angular.IO找到。例如，在组件内部使用menubarState = true。

- Kristian

Answer 4

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

@Output() menubarState: string;

或者您可能想要使用etatAffichage代替menubarState

您需要完成3个动画步骤：

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

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

- bhantol