angular - 在功能模块中延迟加载 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 组件。
某些组件显然会在许多功能模块中使用。

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

Answer 1

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

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

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