Angular 7 动画触发器导致控制台错误

Question

我正在尝试在组件上设置淡入淡出动画。 我的应用程序模块导入 BrowserAnimationsModule。

我在一个单独的文件中创建了一个动画和一个触发器：

import { animate, style, animation, trigger, useAnimation, transition } from '@angular/animations';

export const fadeIn = animation([style({ opacity: 0 }), animate('500ms', style({ opacity: 1 }))]);

export const fadeOut = animation(animate('500ms', style({ opacity: 0 })));

export const fadeInOut = trigger('fadeInOut', [

  transition('void => *', useAnimation(fadeIn)),

  transition('* => void', useAnimation(fadeOut))

]);

然后，我创建了一个组件并验证了该组件本身是否有效：

import { Component, OnInit } from '@angular/core';

import { Globals } from '@app/globals';

import { fadeInOut } from '@app/animations';

@Component({

  selector: 'app-global-alert',

  template: `

    <div class="global-alert" *ngIf="globalAlert">

      <div class="global-alert-message"><ng-content></ng-content></div>

      <div class="close" (click)="closeGlobalAlert()"></div>

    </div>

  `,

  styles: [],

  animations: [fadeInOut]

})

export class GlobalAlertComponent implements OnInit {

  private globalAlert: boolean;

  constructor(private globals: Globals) {

    this.globalAlert = globals.hasGlobalAlert;

  }

  ngOnInit() {}

  closeGlobalAlert() {

    this.globals.hasGlobalAlert = false;

    this.globalAlert = false;

  }

}

请注意，我正在存储此警报是否应出现在 globals.ts 文件中的状态，尽管这无关：

import { Injectable } from '@angular/core';

@Injectable()

export class Globals {

  hasGlobalAlert = true;

}

所以我在另一个组件的 html 中使用该组件，如下所示：

<div>

lots of html

</div>

   <app-global-alert>Hello world</app-global-alert>

这有效，当您单击关闭按钮时，警报将被解除，一切都按预期进行。但是，当我尝试将触发器添加到它时

   <app-global-alert [@fadeInOut]>Hello world</app-global-alert>

我收到控制台错误 Error: Found the synthetic property @fadeInOut. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

我已经在谷歌上搜索了这个，但 AFAICT 我已经涵盖了大多数回复中的所有问题：我已经animations在组件中包含了声明，等等。

我错过了什么？

Answer 1

正如官方 文档中所述，动画应该添加到组件的元数据属性中。这里有这样的财产GlobalAlertComponent：@Component({&nbsp; animations: [fadeInOut],&nbsp; ...})export class GlobalAlertComponent implements OnInit {...这允许在html此组件的一部分内的任何元素上使用动画。但是@fadeInOut动画已经在另一个组件中使用了html：<div>&nbsp; lots of html</div>&nbsp; <app-global-alert [@fadeInOut]>Hello world</app-global-alert>确保此组件在其元数据中具有导入和动画属性。

Answer 2

我收到控制台错误错误： Found the synthetic property @fadeInOut. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.当您没有"BrowserAnimationsModule" or "NoopAnimationsModule"在包含 Module 的组件中导入模块时会发生此错误。如果您的动画组件在 App 模块中，请检查 app.module 在 @NgModule 中是否具有以下内容 -@NgModule({&nbsp;&nbsp;&nbsp; imports: [&nbsp; &nbsp; BrowserModule,&nbsp; &nbsp; BrowserAnimationsModule //or NoopAnimationsModule&nbsp; ],&nbsp; providers: [],&nbsp; bootstrap: [AppComponent]})export class AppModule { }