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

前端之家收集整理的这篇文章主要介绍了Angular2延迟加载服务被实例化两次前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我今天刚刚将我的应用程序切换为延迟加载.
我有一个导出一堆服务的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是唯一一个使用提供程序导入模块的模块.

也可以看看:

> Docs on Modules.所有这些都在那里解释.

猜你在找的Angularjs相关文章