多模块角度应用程序中的 ng-translate 问题答案

【问题标题】：Troubles with ng-translate in multi-modules angular app多模块角度应用程序中的 ng-translate 问题
【发布时间】：2020-04-12 20:14:43
【问题描述】：

我有一个由几个模块组成的 Angular 应用程序： 1.应用 2.展示 3.简介 4. 共享

翻译服务在共享模块中注册。这适用于模块（应用程序、显示器）。

在显示模块中有一个组件负责显示一个对象。这是导出的。

如果组件显示在 App 的上下文中，则翻译和所有其他导入都有效。如果我将此组件集成到 Lady Loading Module (Profile) 中，所有依赖项和翻译都会丢失。

我做错了什么？我在哪里可以阅读它？

感谢您的提示。

【问题讨论】：

在共享模块中：imports: [TranslateModule], exports: [TranslateModule]。在应用模块中：imports: [TranslateModule.forRoot({ loader: {...}})]。如何设置加载器对象，您可以在教程中看到。

标签： angular lazy-loading ngx-translate

【解决方案1】：

1.一种用于延迟加载模块的加载器设置：

shared.module.ts

import { TranslateModule } from '@ngx-translate/core';

// Inside @NgModule
imports: [TranslateModule],
exports: [TranslateModule],

app.module.ts

// No need to set up isolate !!! defoult is false it meens loader will work on all lazy loaded modules
imports: [TranslateModule.forRoot({loader: {...}, isolate: false})]

2。对于大型应用延迟加载翻译：

JSON 文件

assets/i18n/app/en.json 和 fr.json 以及您想要多少种语言。
assets/i18n/home/en.json 和 fr.json 以及你想要多少种语言。

对于 root 或 app.module.ts，请参见上文：app.module.ts 并将隔离更改为 true，并将加载器路径更改为：assets/i18n/app/*.json。

延迟加载的 home.module.ts 加载器设置为路径：assets/i18n/home/*.json。

imports: [TranslateModule.forChild({loader: {...}, isolate: true})]

现在 root 和孩子将拥有自己的延迟加载翻译。

【讨论】：