ngx-translate 不适用于延迟加载模块 [英] ngx-translate is not working for lazy loaded module
问题描述
我想在 angular 5 项目延迟加载模块中实现 ngx-translate,它仅适用于父模块,但不适用于我的子模块,因此请提出更好的解决方案.
I want to implement ngx-translate in angular 5 project lazy loaded module wise its working for only parent module but not works in my child module so please suggest better solution.
我为应用模块编写代码.
I write my code for app module .
我正在使用@ngx-translate/core 和@ngx-translate/http-loader
and i am using @ngx-translate/core and @ngx-translate/http-loader
app.module.ts
app.module.ts
TranslateModule.forRoot({
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
LayoutModule,
HttpClientModule,
BrowserAnimationsModule,
HttpModule, ReactiveFormsModule,
RouterModule.forRoot(
appRoutes,
{ enableTracing: false }
),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: createTranslateLoader,
deps: [HttpClient]
}
})
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/app/', '.json');
}
child.module.ts
child.module.ts
@NgModule({
imports: [
RouterModule,
CommonModule,
BrowserModule,
BrowserAnimationsModule,
GridModule,
DropDownsModule,
FormsModule,
ExcelModule,
ControlMessagesModule, ReactiveFormsModule,
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useFactory: (AdminTranslateLoader),
deps: [HttpClient]
},
isolate: true
})
],
export function AdminTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/admin/', '.json');
}
推荐答案
我遇到了类似的问题,我在 SharedModule 中调用了 TranslateModule.forRoot():
I had a similar problem, where I was calling TranslateModule.forRoot() in a SharedModule:
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
这个SharedModule 由我所有其他延迟加载 模块导入.我有一个菜单栏子组件,带有一个用于切换语言的按钮.该组件以构造函数的常用方式通过注入获取TranslateService:
This SharedModule is imported by all my other lazy-loaded modules. I have a menu-bar child component with a button to switch language. This component gets the TranslateService via injection in the usual way of the constructor:
constructor(private translate: TranslateService) { }
问题
调用 TranslateService.use('[LANG-CODE]')
确实改变了我菜单栏组件中的翻译.但它没有改变任何其他子组件的翻译.
The Problem
Calling TranslateService.use('[LANG-CODE]')
does change the translation in my menu-bar component. But it didn't change the translation for any other child components.
我在 github 上发现了这个(相当老的)问题,基本上说我们不应该在 SharedModule 中调用 TranslateModule.forRoot().
I found this (quite old) issue on github that basically says we shouldn't be calling TranslateModule.forRoot() in a SharedModule.
github 问题 - TranslateModule.forRoot 不应放在 SharedModule 中
所以我按照建议将 TranslateModule.forRoot()
移动到 AppModule
中,并导出 TranslateModule
.然后我在我的 SharedModule
中导入和导出 TranslateModule
.
So I moved the TranslateModule.forRoot()
into the AppModule
as suggested, and export the TranslateModule
. Then I import and export TranslateModule
in my SharedModule
.
这样做之后,调用 TranslateService.use()
也会翻译其他子组件的文本,而不仅仅是调用函数(menu-bar
in我的情况)
After doing this, calling TranslateService.use()
translates the texts for other child components too, not just the one that is calling the function (menu-bar
in my case)
希望有类似问题的其他人会发现这很有用.
Hopefully anyone else with a similar problem will find this useful.
这篇关于ngx-translate 不适用于延迟加载模块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!