Angular2:多个模块中的一个模块实例 [英] Angular2: One instance of module in multiple modules

问题描述

让我们为ng2-translate插件制作示例.

Let's make example for ng2-translate plugin.

我有根AppModule，孩子有TopPanelModule和PagesModule.

我为AppModule配置了ng2-translate.

@NgModule({
  imports: [TranslateModule.forRoot({
    provide: TranslateLoader,
    useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
    deps: [Http]
  })],
  exports: []
})
export class AppModule {
  constructor(translateService: TranslateService) {    
  }
}

---

在AppComponent中，我设置了TranslateModule的语言和基本配置.

---

In AppComponent I set languages and basic configuration for TranslateModule.

@Component(...)
export class AppComponent {
  constructor(translateService: TranslateService) {
    translateService.addLangs(["en", "fr"]);
    translateService.setDefaultLang('fr');

    const browserLang = 'fr';
    translateService.use(browserLang.match(/en|fr/) ? browserLang : 'en');    
  }
}

---

然后我尝试在子模块组件-TopPanelComponent，PagesComponent中使用TranslateModule.没用管道不存在错误，无翻译等.

---

And then I'm trying to use TranslateModule in children modules components - TopPanelComponent, PagesComponent. It does'n work. Pipe not exists error, no translate etc..

为解决此问题，我创建了一个单独的模块MyTranslateModule，在其上配置TranslateModule，然后在我的PagesModule和TopPanelModule中使用此模块.

For resolving this problem, I create a separate module MyTranslateModule, configure TranslateModule on it, and use this module in my PagesModule and TopPanelModule.

@NgModule({
  imports: [TranslateModule.forRoot({
    provide: TranslateLoader,
    useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
    deps: [Http]
  })],
  exports: [TranslateModule]
})
export class MyTranslateModule {
  constructor(translateService: TranslateService) {
    translateService.addLangs(["en", "fr"]);
    translateService.setDefaultLang('fr');

    const browserLang = 'fr';
    translateService.use(browserLang.match(/en|fr/) ? browserLang : 'en');

    console.log('AdminTrModule: calling');
  }
}

和

@NgModule({
  imports: [MyTranslateModule]
})
export class PagesModule{

}

@NgModule({
  imports: [MyTranslateModule]
})
export class TopPanelModule{

}

---

这很重要.有效！但是我认为它创建了TranslateModule的两个实例，因此，当我通过调用TopComponent translateService.use('en')来更改transalte语言时，它会更改TopPanelModule中的语言，而不会更改PagesModule中的语言.

---

This is important part. It works! But I think it creates a two instances of TranslateModule, so, when I change transalte langauge by calling in TopComponent translateService.use('en'), it change language in TopPanelModule, but not in PagesModule.

推荐答案

您需要在模块'MyTranslateModule'中定义一个forRoot函数

You need to define a forRoot function in module 'MyTranslateModule'

export class MyTranslateModule {

static forRoot(): ModuleWithProviders {
    return {
      ngModule: MyTranslateModule ,
      providers: [TranslateService,TRANSLATION_PROVIDERS]
    };
  }

}

然后在appModule中导入MyTranslateModule 如下

then import MyTranslateModule in appModule as following

@NgModule({
  bootstrap: [App],
  declarations: [
    App
  ],
  imports: [ // import Angular's modules
    BrowserModule,
    MyTranslateModule.forRoot(),
    PagesModule,
    TopPanelModule
  ],
  providers: [ // expose our Services and Providers into Angular's dependency ]
})

在这种情况下，翻译服务将创建为沿着应用程序的一个实例"的单例

in this case translate service will be created as singleton "one instance along the application"

这篇关于Angular2:多个模块中的一个模块实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！