在整个项目中共享Angular Material模块

Question

我已经在我的app.module中导入了所有的Angular Material模块。

@NgModule({imports: [
CdkTableModule,
MatAutocompleteModule,
MatButtonModule,
MatCardModule,
MatCheckboxModule,
MatIconModule,
MatInputModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule],})
export class AppModule {}

现在我的程序将重定向到登录页面或布局页面。 以下是代码：

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {AuthGuard} from './shared/guard/auth.guard';

const routes: Routes = [
   {path: '', loadChildren: './layout/layout.module#LayoutModule', canActivate: [AuthGuard]},
   {path: 'login', loadChildren: './login/login.module#LoginModule'}];

@NgModule({
   imports: [RouterModule.forRoot(routes, {useHash: true})],
   exports: [RouterModule]
})
export class AppRoutingModule {}

如何在Login.module和Layout.module中不再重复引入所有的angular material，而是直接从这里使用呢？

我已经在组件LoginComponent中做到了，但是如何在loadChildren中实现呢？

- Jim

Answer 1

Angular的NgModule的声明仅适用于当前组件。这意味着，如果您在AppModule中导入了MaterialModule，则只有添加到AppModule的声明中的组件才能使用来自MaterialModule的元素。您可以创建一个自定义的MaterialModule，将所有声明导入其中，并从该模块中导出它们。然后在项目中，您可以在想要使用的每个模块中使用此自定义模块。

那么，如果对于一个模块没有使用到这些声明，它们在打包时会被消除以减小文件大小。

NgModule({
   imports: [...here goes material modules],
   exports: [...here goes material modules]
})
export class CustomMaterialModule

...

NgModule({
   imports: [CustomMaterialModule]
})
export class YourModule {  }

- Suren Srapyan

---

关于browserAnimationModule，我能在应用程序、布局和登录中导入它吗？ 我试过了，如果我在布局或登录模块中导入所有的Angular材料，那么mat-slider就无法拖动。 - Jim

browserAnimationModule you can add only in the AppModule - Suren Srapyan

能否确保在加载 Angular Material 之前先加载 browerAnimationModule？我刚刚做了测试。如果我在 browerAnimationModule 之前导入 Angular Material，那么滑块将无法拖动。 - Jim

你需要先导入BrowserAnimationModule。 - Suren Srapyan

好的，我会尝试。非常感谢您的答复。它对我很有帮助。 - Jim

Answer 2

创建一个导入模块的数组。

const matModules = [CdkTableModule,MatAutocompleteModule,MatButtonModule]; //etc.

在装饰器中使用它的 imports 和 exports，并创建一个新模块。

@NgModule({
  imports: [...matModules],
  exports: [...matModules]
})
export class MaterialConfigurationModule {}

现在你可以将这个模块简单地导入到其他模块中。

@NgModule({
  imports: [MaterialConfigurationModule],
})
export class AppModule {}

- user4676340

---

关于browserAnimationModule，我能在应用程序、布局和登录中导入它吗？ 我试过了，如果我在布局或登录模块中导入所有的Angular材料，那么mat-slider就无法拖动。 - Jim

我不记得在我的项目中导入过它，只有在App模块中。你可能做了其他的事情。 - user4676340