angular - 找到合成属性@onMainContentChange。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”
问题描述
我有两个模块:AppModule 和 AFModule:
app.module.ts
import { NgModule } from '@angular/core';
...
...
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
...
@NgModule({
imports: [
...
BrowserModule,
BrowserAnimationsModule,
...
],
exports: [
...
],
declarations: [
AppComponent,
AppHomeComponent,
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
InternationalizationService,
fakeBackendProvider
],
bootstrap: [AppComponent]
})
export class AppModule { };
af.module.ts
import { NgModule } from '@angular/core';
import { AFLeftMenuComponent } from "@/modules/af/components/left-menu";
import { AFComponent } from './af.component';
import { CommonModule } from '@angular/common';
import { SidenavService } from '@/shared/_services/sidenav.service'
import {
MatSelectModule,
...
MatSidenavModule,
} from '@angular/material';
@NgModule({
imports: [
...
MatSelectModule,
CommonModule,
MatSidenavModule,
...
],
exports: [
....
],
declarations: [
AFComponent,
AFLeftMenuComponent,
....
],
entryComponents: [],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
SidenavService,
],
bootstrap: [AFComponent]
})
export class AFModule { };
af.component.html:
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #leftSidenav mode="side" opened>
<af-left-menu></af-left-menu>
</mat-sidenav>
<mat-sidenav-content [@onMainContentChange]="onSideNavChange ? 'open': 'close'">
<div class="main_content">
<div style="padding: 20px">
Your content
</div>
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
如果我将 BrowserAnimationModule 导入af.module.ts,它会显示错误:错误错误:未捕获(承诺中):错误:浏览器模块已加载。如果您需要从延迟加载的模块中访问常用指令,例如 NgIf 和 NgFor,请改为导入 CommonModule。
解决方案
打扰各位了,经过两天的努力,我找到了根本原因。
我犯了一个错误,我没有在af.component.ts中添加onMainContentChange动画。现在运行良好。