可能是最常见的问题之一,而我发现的documentation和一些other questions试图为我清理一些东西,但我仍然不确定如何解决这个问题。
所以这是我的结构:
的AppModule
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
@NgModule({
declarations: [
AppComponent
],
imports: [
HttpClientModule,
BrowserModule,
AppRoutingModule,
ContrySelectorModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
export class AppModule { }
CountrySelectorModule
@NgModule({
declarations: [CountryselectorComponent],
imports: [
CommonModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
exports: [
CountryselectorComponent
]
})
export class ContrySelectorModule { }
选择模块:
@NgModule({
declarations: [SelectionComponent],
imports: [
CommonModule,
SelectionRoutingModule,
UspblockModule,
TranslateModule.forChild({//or forRoot, no idea how to configure this
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}})
],
})
export class SelectionModule { }
现在问题是我不想在延迟加载的模块中再次进行语言配置,因为国家选择器模块已经处理了这个问题。我现在不确定如何正确配置延迟加载的模块(实际上不确定countrySelectorModule是否正确完成)。使用standard github documentation我无法解决这个问题。我试过搞乱.forChild()
但到目前为止没有运气。
我需要共享模块吗?我是否需要在任何地方导入countrySelectorModule(不是首选)?定制装载机? t.b.h.我不知道,文档对于更高级的场景来说有点短。
我通过以下方式解决了这个问题:
CoreModule
(基本上是一个共享模块)CoreModule
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
@NgModule({
declarations: [],
imports: [
CommonModule,
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
},
isolate: false
}),
],
exports: [TranslateModule],
})
export class CoreModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: CoreModule,
providers: [ShoppingCartService, AccountService]
}
}
}
因此,这确保了对于导入CoreModule
的每个模块,TranslateModule
将使用相同的配置。一定要导出它。 forRoot()
还解决了确保ShoppingCartService
和AccountService
只是一个实例而不是每个懒惰模块创建一个单独的服务。
的AppModule
@NgModule({
declarations: [
AppComponent
],
imports: [
HttpClientModule,
BrowserModule,
AppRoutingModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
},
isolate : false
}),
CoreModule.forRoot(),
ContrySelectorModule,
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }
由于AppModule
是你的主要入口点,所以forRoot()
在这里打电话给TranslateModule
CoreModule
而无需任何方法调用。在我的例子中CountrySelectorModule
也只需要导入CoreModule
而不是别的。