Angular2：从其他模块引用可配置模块

Question

我的主AppModule最近有了显着增长，所以我想将它切成多个较小的模块。作为第一步，我使用了许多登录/注册组件并将它们放在LoginModule中。但是有一个问题。我放在LoginModule中的组件取决于在主AppModule中声明和配置的另一个模块。这个必需的模块接受了许多配置参数，当然，我想在一个地方配置它。

举个例子，我们来看IonicModule，但这个问题是Angular2-generic。

我的主要AppModule导入IonicModule和LoginModule，并为IonicModule提供了许多参数。

imports: [
  IonicModule.forRoot(MyApp, {
    mode: 'ios',
    tabsPlacement: 'bottom'
  }),
  LoginModule
]

由于LoginModule中的所有组件都取决于IonicModule，因此我还需要导入IonicModule。但是我应该怎么做配置参数呢？我想避免从AppModule复制它们。

在这种情况下imports: [IonicModule]是否足够？或者我是否需要在某处提取配置参数并在每次引用IonicModule时注入它们？

我将提取的所有其他模块也需要导入IonicModule。

@NgModule({
  imports: [IonicModule],  
  declarations: [
    (...)
  ],
  entryComponents: [
    (...) 
  ],
  providers: (...)
})
export class LoginModule {}

Answer 1

核心模块

您正在寻找的是通过官方角度风格指南创建is recommended的核心模块。

以下是如何重构您的应用以符合样式指南，将所有配置保存在一个位置，以及创建一个非常有条理和精益的应用程序：

1。创建Core Module

要减少根文件夹混乱，请创建一个核心模块，当应用启动时导入 ，永远不会导入其他地方。

步骤：

• 创建app/core文件夹
• 将根服务和组件从app/移至app/core（例如IonicModule）
• 创建一个CoreModule类以拥有核心材料

实施例

import {
  ModuleWithProviders, NgModule,
  Optional, SkipSelf }       from '@angular/core';
import { CommonModule }      from '@angular/common';
import { IonicModule } from 'ionic-angular';

import { ExampleComponent }    from './example.component';
import { ExampleService }       from './example.service';
@NgModule({
  imports:      [
    CommonModule,
    IonicModule.forRoot(MyApp, {
      mode: 'ios',
      tabsPlacement: 'bottom'
    })
  ],
  declarations: [ ExampleComponent ],
  exports:      [ ExampleComponent ]
})
export class CoreModule {
}

• 请记住：您需要在应用范围内使用forRoot()方法的任何模块只需要导入CoreModule一次。完成此操作后，它将适用于您应用中的每个模块。

2。将提供者添加到CoreModule（forRoot）

将其放入CoreModule班级：

static forRoot(): ModuleWithProviders {
  return {
    ngModule: CoreModule,
    providers: [
      ExampleService
    ]
  };
}

这是唯一的地方，您应该放置应用范围的单身提供商。请勿将它们放在SharedModule。

中

3。将CoreModule导入AppModule

将CoreModule.forRoot()添加到您的AppModule导入中，如下所示：

imports: [
  AppRoutingModule,      
  BrowserModule,
  CoreModule.forRoot()
],

  

仅在根应用程序模块forRoot中调用AppModule。在任何其他模块中调用它，特别是在延迟加载的模块中，与意图相反，可能会产生运行时错误。

4。 CoreModule的{​​{3}}（可选，但建议使用）

此时一切都应该有效，但这是防止重新导入CoreModule的最佳做法。这在与他人合作时特别有用，因为其他开发人员可能不完全了解应该如何使用CoreModule。

将此添加到您的CoreModule班级：

constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
  throwIfAlreadyLoaded(parentModule, 'CoreModule');
}

进一步考虑

• Lazy-loaded routes 考虑Prevent reimport。这样，只需加载当前路径所需的内容，您的应用的初始负载就会更快。
• creating lazy-loaded routes 考虑创建一个不包含应用范围服务的SharedModule。您可以在此处放置某些路径所需的组件，但不是所有路径。
• Why? 这样做的目的是，如果您加载一个不需要共享服务组件的延迟加载路由，那么如果这是请求的第一个路由则不会下载当应用程序首次加载时这将加快您的初始应用加载时间。当然，如果调用需要它的路径，那么该组件将按预期可用。

Answer 2

您可以查看共享模块部分here

理论上，您可以在一个模块中设置公共依赖模块，从那里导出并导入它。这样你仍然可以在一个地方设置参数。 但是，我没有尝试使用带有forRoot中的app组件的模块来执行此操作。

@NgModule({ imports: [IonicModule.forRoot(),//other deps with parameters], 
declarations: [ (...) ], entryComponents: [ (...) ], 
providers: (...) ,
exports:[//export deps]})
 export class commonModule {}

希望有所帮助