angular - Angular 2 中的延迟加载

Question

我正在尝试配置我的应用程序以使用 RC5 中的延迟加载模块。这是我遇到的问题。

我有一个模块使用 RouterModule.forChild(router) 并延迟加载，我们称它为 LevelOneModule。该模块还有一些延迟加载的模块，我们称它们为 LevelTwoModule-s。这在大多数情况下都有效，但我必须解决问题:

1. 我在我的 LevelOneModule 中提供了一项服务，我需要在 LevelTwoModule-s 中作为单例使用该服务，但出于某种原因，每个 LevelTwoModule 都有自己的服务实例。

代码示例如下:

LevelOne模块

@NgModule({
    imports: [
        SharedModule,
        levelOneRouter
    ],
    providers: [SomeService],
    declarations: [...]
})

LevelTwoModule:

@NgModule({
    imports: [
        SharedModule,
        levelTwoRouter
    ],
    providers: [],
    declarations: [...]
})

1. 我希望 LevelOneModule 注册一些我需要在多个 LevelTwoModule 中可用的声明，我不确定如何实现这一点。

如果我只是尝试在 LevelOneModule 中注册声明:

declarations: [SomeComponent, ANotherComponent]

我收到无法识别的元素错误，如果我尝试分别在每个 LevelTwoModule 中注册声明，我会收到 is part of the declarations of 2 modules 错误。

我还尝试为 LevelOneModule 制作另一个 SharedModule，但也没有用。

非常感谢任何帮助或信息，只是为我指明正确的方向。

Answer 1

问题 #1 的答案

您应该要求 LevelOneModule 注册单例，您可以通过将所需的提供程序放在静态方法中来完成此操作:

@NgModule({
    imports: [
        SharedModule,
        levelOneRouter
    ],
    providers: [],
    declarations: []
})
export class LevelOneModule{
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: LevelOneModule,
      providers: [SomeService]
    };
  }
}

之后，在你的 LevelTwoModule 导入时调用这个静态方法:

@NgModule({
    imports: [
        LevelOneModule.forRoot(),
        levelTwoRouter
    ],
    providers: [],
    declarations: []
})

这样，在 LevelOneModule 中实例化的提供程序将作为单例传递给子模块。

更多信息:guide

问题 #2 的答案

使声明(管道/组件/指令/服务)在另一个模块中可用。您应该将这些声明添加到 exports 参数中:

@NgModule({
    imports: [
        SharedModule,
        levelOneRouter
    ],
    providers: [],
    declarations: [
        ComponentIJustWantToUseInHere,
        ComponentIWantToUseHereAndElsewhere
    ],
    exports : [
        ComponentIWantToUseHereAndElsewhere,
        ComponentOrPipeOrWhateverIWantToUseElsewhere
    ]
})
export class LevelOneModule{
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: LevelOneModule,
      providers: [SomeService]
    };
  }
}