在功能模塊中延遲加載 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 ，您可以將其導入到所有模塊中，如果僅由少數組件/不經常使用，則根據需要導入其他組件。