ngx-translate:未加载模块的单独翻译文件

Question

我目前正在尝试为NgRx项目中的Angular模块进行翻译。对于翻译，我使用ngx翻译，整个项目基于一个名为"；Angular NgRx Material Starter"；。

然而，目前我面临的问题是，我已经创建了一个名为"；设置"；它将使用来自/assets/i18n/setup目录的单独翻译。为了在这个模块中创建新模块和组件，我使用了Angular CLI。

不幸的是，当我访问"；设备"；"；设置"；模块，因此页面只显示翻译文件中字符串的键。为了说明这个问题，我创建了一个非常简单的例子来用基本模板重现行为。由于我完全被困在这里，我们非常感谢您的帮助。

这是一个包含完整项目的ZIP文件：ngx翻译问题

有什么想法吗？

core.module.ts:(一开始加载一次)，加载主翻译：

export {
...
};
export function httpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(
http,
`${environment.i18nPrefix}/assets/i18n/`,
'.json'
);
}
@NgModule({
imports: [
...
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: httpLoaderFactory,
deps: [HttpClient]
}
})
],
declarations: [],
providers: [
...
],
exports: [
...
TranslateModule
]
})
export class CoreModule {
...
}

共享的.module.ts：；共享的"；模块只导入和导出翻译模块：

@NgModule({
imports: [
...
TranslateModule,
...
],
declarations: [
...
],
exports: [
...
TranslateModule,
...
]
})
export class SharedModule {
...
}

setup.module.ts:；设置"；模块如下：

export function setupHttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(
http,
`${environment.i18nPrefix}/assets/i18n/setup/`,
'.json'
);
}
@NgModule({
imports: [
LazyElementsModule,
SharedModule,
SetupRoutingModule,
StoreModule.forFeature(FEATURE_NAME, reducers),
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useFactory: setupHttpLoaderFactory,
deps: [HttpClient]
},
isolate: true
}),
EffectsModule.forFeature([
])
],
declarations: [DevicesComponent]
})
export class SetupModule {
}

devices.component.ts/.html：这是"；设备"；组件：

@Component({
selector: 'anms-devices',
templateUrl: './devices.component.html',
styleUrls: ['./devices.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DevicesComponent implements OnInit {
constructor(private translate: TranslateService) { }
ngOnInit(): void {
}
}

<p>devices works!</p>
<h1>{{ 'setup.translation.test' | translate }}</h1>

设置路由模块.ts:；设置"；路由模块：

const routes: Routes = [
{
path: '',
redirectTo: 'devices',
pathMatch: 'full'
},
{
path: 'devices',
component: DevicesComponent,
data: { title: 'ecue.setup.devices.title' }
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class SetupRoutingModule { }

Answer 1

好吧，我找到了这个问题的答案，它很简单(可能太明显了)。在新创建的模块中，我创建了一个效果，将在子模块的翻译服务中设置语言：

setTranslateServiceLanguage = createEffect(
() => () =>
this.store.pipe(
select(selectSettingsLanguage),
distinctUntilChanged(),
tap((language) => this.translateService.use(language))
),
{ dispatch: false }
);