2

我的主要AppModule模块最近有了显着增长，所以我想把它分成多个更小的模块。作为第一步，我拿了一些登录/注册组件并将它们放在LoginModule. 不过，有一个问题。我放置的组件LoginModule依赖于在 main 中声明和配置的另一个模块AppModule。这个必需的模块接受许多配置参数，当然，我希望将它配置在一个地方。

举个例子，IonicModule但这个问题是 Angular2 通用的。

我的主要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 {}
4

2 回答 2

1

核心模块

您正在寻找的是创建官方 Angular Style Guide推荐的核心模块。

以下是如何重构您的应用程序以满足样式指南，将所有配置保存在一个地方，并创建一个非常有组织和精益的应用程序：

1. 创建核心模块

为了减少根文件夹的混乱，创建一个核心模块，我们在应用程序启动时导入一次，从不导入其他任何地方。

脚步：

  • 创建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可选，但推荐）

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

将此添加到您CoreModule的课程中：

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

进一步的考虑

  • Lazy-loaded routes考虑创建延迟加载的路由。这样，您的应用程序的初始加载可以通过仅加载当前路由所需的内容来更快。
  • SharedModule考虑创建一个SharedModule不包括应用程序范围的服务。您可以在此处放置某些路线需要的组件，但不是所有路线。
  • Why?这样做的目的是，如果您加载不需要共享服务组件的延迟加载路由，如果这是应用程序首次加载时请求的第一个路由，它将不会下载。这将加快您的初始应用加载时间。当然，如果调用了需要它的路由，则该组件将按预期可用。
于 2016-12-27T19:07:22.940 回答
0

您可以在此处查看共享模块部分

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

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

希望能帮助到你

于 2016-12-27T14:21:21.397 回答