Angular 8-将所有物料模块导入主应用程序模块是否比在不同模块内导入单个物料模块更好?

时间:2019-07-15 10:49:46

标签: angular angular-material angular8 angular-material-7

将材料模块导入Angular 8项目的最佳方法是什么?是通过将material.module.ts导入到应用主模块,然后在其他模块中使用它的?

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

还是仅将每个模块中主要使用的材料模块导入?

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

4 个答案:

答案 0 :(得分:1)

最好的方法是仅导入每个组件所需的内容,而在app.module.ts中仅导入全局服务。 可以使用角度超过2年并且找不到最佳解决方案

答案 1 :(得分:1)

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

如果某些模块中的仅某些组件使用了Angular Material公开的组件,则将这些模块导入这些组件所属的模块中是有意义的。

例如:为了方便讨论,您的应用具有三个模块:CartModuleCheckoutModuleProfileModule。并且只有您的CartModule使用了其中一种Angular Material Components。同样,如果此CartModule延迟加载。在这种情况下,将特定的Angular Material模块导入CartModule很有意义。


但是,在大多数情况下并非如此。

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

希望这可以消除您的疑虑。

答案 2 :(得分:1)

是的,如果是这样

  

如果仅在产品模块中使用了垫卡,则只需导入   MatCardModule。

那也行。

但是稍后,如果您想在B模块中使用它,则也不要在其中导入它。但是将MatCarModule移至MaterialModule。

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

由于两个原因,不建议将其直接导入每个模块中:

  1. 如果B和Products模块是延迟加载的,则相同的MatCardModule将最终出现在两个块中(这很糟糕)
  2. 由于这是一个组件模块,因此很有可能最终也会在其他地方使用它。因此,首选MaterialModule方式。

答案 3 :(得分:1)

好吧,如果你在整个应用程序中使用角度材料组件,你应该把你的角度材料模块放在共享模块中,像这样可能是 shared/modules/material.modules.ts,但如果你只有几个组件在您的应用程序中,您应该只在特定组件中导入材料模块...