在整个项目中共享角度材料模块

Question

我在app.module中导入了所有角度材质模块

@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中再次导入所有材质

我用compoent完成了它:LoginComponent和我工作,但我怎么能在loadChildren中做到这一点？

Answer 1

Angular NgModule-s声明仅适用于当前组件.意味着如果你已经导入MaterialModule了AppModule,只有在声明中添加的组件AppModule可以使用来自的元素MaterialModule.您可以创建自定义MaterialModule,将所有声明导入其中并从该模块导出它们.然后在项目中,您可以在要使用的每个模块中使用此自定义模块.

如果捆绑大小,树摇动将丢弃那些模块未使用的声明.

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

...

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

Answer 2

创建导入模块的数组

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

用它在你的装饰imports，并 exports创建一个新的模块

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

现在您可以简单地将此模块导入到您的其他模块中。

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