核心模块中的 ng2-translate

Question

在我们的Angular应用程序中，我们有功能模块以及核心和共享模块 如 Angular - linkStyle Structure best practices.

所述

我们使用 ng2-translate 并且根据文档，我们应该在 App 模块 中调用 forRoot()（根模块).

这就是我们的 App 模块 的样子：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FeatureAModule,
    FeatureBModule,
    CoreModule,
    TranslateModule.forRoot({
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

因为我们要翻译我们的菜单，它是 核心模块 的一部分，所以我们必须在那里导入 翻译模块 ，就像这样:

@NgModule({
  imports: [
    TranslateModule
  ],
  exports: [
      FormsModule,
      MenuComponent,
      BreadcrumbComponent
  ],
  declarations: [MenuComponent, BreadcrumbComponent]
})
export class CoreModule {
    constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
      throwIfAlreadyLoaded(parentModule, "CoreModule");
    }
 }

这有意义吗？我是否应该从 App 模块 中删除 TranslateModule.forRoot(...) 并将其放入 Core 模块 [=37] 的 imports =] ？有错吗？

Answer 1

如果您正在关注文档，那么 AppModule 将是唯一要导入的文档 CoreModule。如果是这种情况，只要将 TranslateModule.forRoot() 添加到 CoreModule.imports 数组并将 TranslateModule 添加到 CoreModule.exports 数组，事情就会正常进行。然后在您的 AppModule 中，您需要做的就是导入 CoreModule，而无需再次处理翻译模块。

这类似于文档建议集成 RouterModule 的方式。拍一张look at this。请注意 RouterModule.forRoot() 是在 AppRoutingModule 中导入的，而不是在 AppModule 本身中。所以在你的位置我会：

核心模块

// forRoot is OK here because AppModule is the only one to import CoreModule
imports: [TranslateModule.forRoot(...)]

// will make Translate available to AppModule
exports: [TranslateModule]

AppModule

//importing Core will import Translate and its services provided by .forRoot()
imports: [CoreModule]

共享模块

//only if the components, directives and pipes of SharedModule need Translate
imports: [TranslateModule]

//so that all modules that import SharedModule will have Translate access
exports: [TranslateModule]

核心模块中的 ng2-translate

ng2-translate in CoreModule

angular

angular-cli

ng2-translate