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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (100)

我今天刚刚将我的应用程序切换为延迟加载。

我有一个导出一堆服务的SharedModule。 在我的AppModule中,我导入SharedModule,因为AppComponent需要访问一些共享服务。

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

当应用程序首次加载时,我竟然可以接到控制台,但每当我导航到FinalReturnModule中的页面时,显然,由于有两个实例,因为模块无法通信,所以没有任何工作正常。

如何阻止服务实例化两次?该应用程序使用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
提问于
用户回答回答于

如果该服务确实是一个单例(一个创建一个),请不要将它添加到任何将作为延迟加载模块的一部分的模块中(例如在SharedModule中)。 原因是延迟加载的模块获得自己的服务实例。 如果您希望服务真正是一个单独的服务,那么只需将它添加到AppModule,或者只将其导入到AppModule的“核心模块”。 或者您可以使用仅在AppModule中调用的forRoot

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是使用提供程序导入模块的唯一模块。

扫码关注云+社区

领取腾讯云代金券