Angular2 延迟加载服务被实例化两次

Question

我今天刚将我的应用程序切换为延迟加载。
我有一个 SharedModule 导出一堆服务。在我的 AppModule 中，我导入了 SharedModule，因为 AppComponent 需要访问一些共享服务。

在另一个模块 FinalReturnModule 中，我导入 SharedModule。在我的一项服务中，我在构造函数中放置了一个 console.log('hi') 。

应用程序首次加载时，我会 hi 进入控制台。每当我导航到 FinalReturnModule 中的页面时，我都会再次看到 hi。显然，由于有两个实例，因此模块无法通信，因此无法正常工作。

如何阻止服务被实例化两次？

编辑：背景，该应用程序是使用 angular-cli 构建的。

当前版本：

angular-cli: 1.0.0-beta.24
node: 6.9.1
os: win32 ia32
@angular/common: 2.4.1
@angular/compiler: 2.4.1
@angular/core: 2.4.1
@angular/forms: 2.4.1
@angular/http: 2.4.1
@angular/platform-browser: 2.4.1
@angular/platform-browser-dynamic: 2.4.1
@angular/router: 3.1.1
@angular/compiler-cli: 2.4.1

Answer 1

如果该服务确实是一个单例（创建一次），请不要将其添加到任何将成为延迟加载模块一部分的模块中（例如在 SharedModule 中） .原因是延迟加载的模块获得了它们的 own 服务实例。如果您希望该服务真正成为单例，则只需将其添加到 AppModule，或者仅将导入到 AppModule 的 "Core Module"。或者您可以使用 forRoot ，它只会在 AppModule

中调用

import { ModuleWithProviders } from '@angular/core';

@NgModule({
  declarations: [...],
  imports: [...]
})
class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [ MySingletonService ]
    }
  }
}

@NgModule({
  imports: [ SharedModule.forRoot() ]
})
class AppModule {}

@NgModule({
  imports: [ SharedModule ]
})
class OtherModule {}

现在 AppModule 是唯一一个使用提供程序导入模块的模块。

另请参阅：

Docs on Modules。所有这些东西都在那里解释。

Angular2 延迟加载服务被实例化两次

Angular2 Lazy Loading Service being Instantiated Twice

angular

angular2-routing

angular2-services

angular2-modules