Question

让我们为ng2-translate插件做个例子。

我有根AppModule，以及子TopPanelModule和PagesModule。

我为ng2-translate配置AppModule。

@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设置了语言和基本配置。

@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');    
  }
}

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

要解决此问题，我创建了一个单独的模块MyTranslateModule，在其上配置TranslateModule，并在我的PagesModule和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中的语言

Answer 1

您需要在模块“MyTranslateModule”

中定义forRoot函数

export class MyTranslateModule {

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

}

然后在appModule中导入MyTranslateModule 如下

@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 ]
})

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

Angular2：多个模块中的一个模块实例

1 个答案: