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 {}

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

2 个答案: