Javascript Angular 7动画触发器导致控制台错误
我正在尝试在组件上设置fadeInOut动画。 我的应用程序模块导入BrowserAnimationsModule 我在一个单独的文件中创建了一个动画和一个触发器:Javascript Angular 7动画触发器导致控制台错误,javascript,angular,animation,angular-animations,Javascript,Angular,Animation,Angular Animations,我正在尝试在组件上设置fadeInOut动画。 我的应用程序模块导入BrowserAnimationsModule 我在一个单独的文件中创建了一个动画和一个触发器: import { animate, style, animation, trigger, useAnimation, transition } from '@angular/animations'; export const fadeIn = animation([style({ opacity: 0 }), animate('5
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;
}
}
因此,我在另一个组件的html中使用该组件,如下所示:
<div>
lots of html
</div>
<app-global-alert>Hello world</app-global-alert>
这是可行的,当您单击“关闭”按钮时,警报将被解除,一切正常。但是,当我尝试添加触发器时
<app-global-alert [@fadeInOut]>Hello world</app-global-alert>
我得到一个控制台错误
错误:找到合成属性@fadeInOut。请在应用程序中包括BrowserAnimationsModule或NoopAnimationsModule
我已经在谷歌上搜索过了,但是在大多数回复中我已经涵盖了所有的问题:我在组件中包含了动画声明,等等
我错过了什么?我得到了一个控制台错误:找到了合成属性@fadeInOut。请在应用程序中包括BrowserAnimationsModule或NoopAnimationsModule 如果尚未在包含模块的组件中导入BrowserAnimationsModule或NoopAnimationsModule模块,则会发生此错误。如果您的动画组件位于App module中,则检查App.module在@NgModule中是否具有以下内容-
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule //or NoopAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
我得到一个控制台错误:找到了合成属性@fadeInOut。请在应用程序中包括BrowserAnimationsModule或NoopAnimationsModule 如果尚未在包含模块的组件中导入BrowserAnimationsModule或NoopAnimationsModule模块,则会发生此错误。如果您的动画组件位于App module中,则检查App.module在@NgModule中是否具有以下内容-
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule //or NoopAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
您需要添加BrowserAnimationsModule
在导入部分的app-module.ts文件中
import: [
BrowserAnimationsModule
]
希望这会有帮助。
快乐编码:您需要添加BrowserAnimationsModule
在导入部分的app-module.ts文件中
import: [
BrowserAnimationsModule
]
希望这会有帮助。
快乐编码:如官方所述,动画应该添加到组件的元数据属性中。GlobalAlertComponent中有这样的属性:
这允许在此组件的html部分内的任何元素上使用动画。但是@fadeInOut动画已在另一个组件的html中使用:
确保此组件的元数据中包含导入和动画属性。如官方所述,动画应添加到组件的元数据属性中。GlobalAlertComponent中有这样的属性:
这允许在此组件的html部分内的任何元素上使用动画。但是@fadeInOut动画已在另一个组件的html中使用:
确保此组件的元数据中包含import和animation属性。只想确认您的GlobalAlertComponent是否是AppModule的一部分,而不是另一个功能模块?如果它是功能模块的一部分,则各个功能模块必须导入BrowserAnimationsModule。GlobalAlertComponent是SharedModule的一部分。如果我尝试将BrowserAnimationsModule导入SharedModule,则会收到另一个错误:承诺中的未捕获错误:错误:BrowserModule已加载。。如果我尝试从AppModule中删除它,仍然会出现错误。请尝试在共享模块中重新导出BrosWaranimationModule,即导出:BrowserAnimationModule并从AppModule中删除引用。请参阅接受的答案:结果证明与模块无关。我认为angular应该在这里抛出一个更有用的错误。只是想确认您的GlobalAlertComponent是否是AppModule的一部分,而不是另一个功能模块?如果它是功能模块的一部分,则各个功能模块必须导入BrowserAnimationsModule。GlobalAlertComponent是SharedModule的一部分。如果我尝试将BrowserAnimationsModule导入SharedModule,则会收到另一个错误:承诺中的未捕获错误:错误:BrowserModule已加载。。如果我尝试从AppModule中删除它,仍然会出现错误。请尝试在共享模块中重新导出BrosWaranimationModule,即导出:BrowserAnimationModule并从AppModule中删除引用。请参阅接受的答案:结果证明与模块无关。我认为angular应该在这里抛出一个更有用的错误。这修复了错误,尽管实际的动画还没有工作。我想这是因为我的ngIf在组件的模板中,而不是组件本身。是的,就是这样。我把所有东西都放到了全局警报组件中,包括触发器。现在工作。感谢@vadiThis修复了错误,尽管实际的动画还没有工作。我想这是因为我的ngIf在组件的模板中,而不是组件本身。是的,就是这样。我把所有东西都放到了全局警报组件中,包括触发器。现在工作。谢谢@vadi
<div>
lots of html
</div>
<app-global-alert [@fadeInOut]>Hello world</app-global-alert>