首页 文章

从延迟加载的模块中的要素组件中分离页面组件

提问于
浏览
1

在一个大的单模块Angular 5应用程序上工作我试图将它分成多个模块,以提高可维护性和性能(延迟加载) .

我做了什么

我已经创建了多个专门用于延迟加载的模块 . 他们包含

  • navigating to the route 时应呈现的主要组件(页面)

  • 子路径的所有组件(页面)

  • 上述组件中使用的所有要素组件(不可路由) .

看来我需要使用多个模块中的一些功能组件,我正在考虑

  • 继续使用我当前的结构并导出 only 功能组件

  • 将要素组件提取到单独的共享模块中

我的问题

性能方面,当一个(延迟加载的)模块需要从另一个模块导入功能组件时,它会对我选择的上述哪个选项产生影响?

1 回答

  • 0

    我特别喜欢功能2,你将功能组件提取到一个单独的共享模块中,举一个使用Angular Material的例子,你可以拥有所有的页面,包括延迟加载和非延迟加载,使用大约5或6个反复模块,将这些模块分别连续导入到延迟加载的组件模块中会浪费时间和资源,而是将组件(功能模块)放入可重用的共享模块中 . 每个延迟加载的模块 .

    我用一个简单的模块实现了这个目标: -

    @NgModule({
      imports: [
        ANGULAR_MODULES,
        MATERIAL_MODULES,
        COVALENT_MODULES,
        OTHER_MODULES
      ],
      declarations: [],
      exports: [
        ANGULAR_MODULES,
        MATERIAL_MODULES,
        COVALENT_MODULES,
        OTHER_MODULES
      ]
    })
    export class SharedModule {
      static forRoot(): ModuleWithProviders {
        return {
          ngModule: SharedModule,
          providers: [SERVICES]
        };
      }
    }
    

    该模块包括所有重用的模块和服务 . 然后使用它们,我只是将它们添加到我的延迟加载模块中:

    @NgModule({
      imports: [
        CommonModule,
        UsersRoutingModule,
        SharedModule
      ],
      declarations: [UsersComponent]
    })
    export class UsersModule {
    }
    

相关问题