在功能模块中延迟加载 Angular Material

Question

目前我有MyAngularModule类似的：

/app/material/material.module.ts

import { MatButtonModule, MatIconModule } from '@angular/material';

const MaterialComponents = [
  MatButtonModule,
  MatIconModule,
...
];

@NgModule({
  imports: [
    MaterialComponents
  ],
  exports: [
    MaterialComponents
  ],
})
export class MyMaterialModule {

}

现在导入一次AppModule。

目前我有一个“扁平”模块架构，全部都急切地加载。

现在我正在更改应用程序架构以具有核心、共享和功能模块（使用延迟加载loadChildren）。

例如。

/features/data-grid/data-grid.module.ts

该模块将使用一些 Angular Material 组件（例如 SpinnerModule），但不是全部。

其他功能模块将使用其他一些 Material 组件。
某些组件显然会在许多功能模块中使用。

问题是：如何在功能模块中加载所需的材质组件？应该MyMaterialModule是模块的子模块吗shared？

Answer 1

如果您只想定义一次组件并在各处导入，那么是的，创建一个组件shared.material.module并导入到需要它们的所有延迟加载组件中。

如果您的目标是加载尽可能少的模块，您可以将所需的确切材质模块导入到每个lazy.module惰性组件中。

第三种选择是在中间的某个地方相遇，并拥有一个共同的材质模块核心，core.material.module您可以将其导入到所有模块中，如果仅由少数组件使用/不经常使用，则可以根据需要导入其他组件。