Angular 8 - 将所有 material 模块导入主应用程序模块是否比在不同模块中导入单个 material 模块更好？

Question

将 material 模块导入 Angular 8 项目的最佳方法是什么？是不是把material.module.ts引入app主模块，然后在其他模块中使用：

import { NgModule } from '@angular/core';

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

@NgModule({
  imports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ],
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ]
})
export class MaterialModule {}

还是干脆在每个模块中导入material主要使用的模块？

例如，如果我只在 ProductsModule 中使用 mat-card，我只需在产品模块中导入 MatCardModule 即可。

Answer 1

最好的方法是只在每个组件中导入他需要的，在 app.module.ts 中只导入全局服务。与 angular 合作超过 2 年，但未找到最佳解决方案

Answer 2

这完全取决于您 Angular Material 公开的所有组件在应用程序中的使用位置。

如果只有某些模块中的某些组件使用 Angular Material 公开的组件，那么在这些组件所属的模块中导入这些模块是有意义的。

例如：为了论证，让我们假设您的应用程序具有三个模块：CartModule、CheckoutModule、ProfileModule。并且只有您的 CartModule 使用 Angular Material 组件之一。此外，如果此 CartModule 是延迟加载的。在这种情况下，仅在 CartModule.

中导入特定的 Angular Material 模块会很有意义

然而，在大多数情况下情况并非如此。

在大多数情况下，为了保持一致的外观和感觉，我们通常倾向于在整个应用程序中使用 Angular Material 模块公开的大量组件。因此，在那种情况下，为了使其更加统一和易于管理，我们通常会按照您在问题本身中所做的方式创建一个 AppMaterialModule。然后我们在我们想要使用这些组件的模块中 import 这个模块。如果我们要在整个应用程序的不同模块中使用这些组件，我们通常会在 [= 中导入 AppMaterialModule 19=] 并从那里导出。这样，我们作为 AppMaterialModule 的一部分公开的组件将在整个应用程序中都可以访问。

希望这能消除您的疑虑。

Answer 3

是的，如果是这样的话

if I only used mat-card in products module, I simply import MatCardModule.

那也行。

但是以后如果你想在B模块中使用它，你也不应该在那个模块中导入它。但是将 MatCarModule 移动到 MaterialModule.

并且MaterialModule应该通过共享模块导入和导出。

不建议在每个模块中直接导入它，原因有两个：

如果 B 和 Products 模块是延迟加载的，那么相同的 MatCardModule 将在两个块中结束（这是不好的）
由于这是一个组件模块，我们很可能最终会在其他地方使用它，因为 well.So MaterialModule 方式是首选。

Answer 4

好吧，如果您在整个应用程序中使用 angular material 组件，您应该将 angular material 模块放在共享模块中，有些像这样可能 shared/modules/material.modules.ts ，但如果您的应用程序中只有几个组件，您应该只在特定组件中导入 material 模块...

Angular 8 - 将所有 material 模块导入主应用程序模块是否比在不同模块中导入单个 material 模块更好？

Angular 8 - Is importing all material modules into the main app module better than importing individual material modules inside different modules?

angular-material

angular

angular-material-7

angular8