关于如何使用@ ngx-translate / core在Angular 4+ Web应用程序中加快动态本地化（选择语言的能力）的实用分步说明。
原则上，您可以找到有关类似主题的出版物，该库的文档可能就足够了，但是我想将此指令系统化，以便使用更加方便。 这样的书签在新手Angular开发人员的存钱罐中。 在文章的结尾，有一个带有示例的打开的存储库的链接。
为什么要精确ngx-translate
我想立即进行预订，这是有关使用特定库的说明。 我们不会谈论替代方案，即角度有自己的国际化定位。 仅仅因为语言的动态变化而存在问题。
我们在出口处得到什么
- Angular应用程序，在
assets/locale文件夹中有*.json文件，其中*.json键及其本地化值，对于Web应用程序中每种受支持的语言都有一个文件。 - 动态语言变化
- 将键存储在对象结构中，即具有以下内容：
// en.json { Common: { Yes: "Yes" } }
这将允许您对键/值进行分组，并以某种方式组织具有本地化的json文件。 对于大型项目，它非常有用。
- 最低限度的自动化并检查傻瓜。 如果您忘记在json中添加密钥怎么办？
- 本地化在html模板和ts代码中的应用
自订
我们创建或准备一个有角度的项目。 角钢的版本为4+，但最好当然是越新鲜越好。
安装必要的库：
npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save @biesbjerg/ngx-translate-extract --saveDev
需要@ngx-translate/http-loader库，以便我们可以从*.json文件读取本地化数据。 您可以没有它，但是随后您将不得不完全独立地编写本地化数据的存储和加载。 这种方法适用于已经将本地化数据（或简单地所有翻译的文本）存储在某处的用户。
@biesbjerg/ngx-translate-extract库是可选的，但非常有用。 它使您可以按应用程序代码收集被遗忘的本地化密钥并更新本地化文件。 使用它来处理这种情况非常方便：添加新语言，然后从该库中运行命令。 结果，新语言的空文件将被填充整个键结构和一些默认值。 下面是一个示例。
- 在主模块中导入库：
@NgModule({ imports: [ TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient], }, useDefaultLang: false, }) ], }) export class AppModule { }
库HttpLoaderFactory存在HttpLoaderFactory ，可以直接在同一文件中对其进行描述，它的大小适中。
export function HttpLoaderFactory(http: HttpClient): TranslateLoader { return new TranslateHttpLoader(http, './assets/locale/', '.json'); }
这是我们指示本地化文件的路径的位置。 如果它们以某种方式分开存储，甚至在不同的环境中以不同的方式存储，请更改此代码以使用例如environment.ts 。
- 原则上，这对于基本设置已经足够了，但是我们将采取另外的步骤-当找不到密钥时进行错误处理。
为此，在配置中再添加一个字段（在指定加载程序之后）：
missingTranslationHandler: { provide: MissingTranslationHandler, useClass: MissingTranslationService },
当然，您需要在单独的文件中创建此处理程序的实现：
export class MissingTranslationService implements MissingTranslationHandler { handle(params: MissingTranslationHandlerParams) { return `WARN: '${params.key}' is missing in '${params.translateService.currentLang}' locale`; } }
- 添加可用语言的存储。 在简单的情况下，将它们放在
environment.ts很方便
locales: ['en', 'ru'], defaultLocale: 'en',
- 为了使服务开始工作，在加载应用程序时必须在AppComponent文件中对其进行初始化：
@Component({...}) export class AppComponent implements OnInit { constructor(private translateService: TranslateService) {} ngOnInit(): void { this.translateService.use(environment.defaultLocale); } }
- 添加文件
en.json和ru.json （根据可用语言列表中指示的内容）。 添加一些基本字段，以便它是有效的json。
采取这些步骤后，该服务将开始工作。
我们使用服务
HTML标记
这里的一切都很简单。 该库提供管道translate ，我们仅将其应用于某些键的标记中。
<label>{{ 'LANGUAGES.TITLE' | translate }}</label>
注意，我在这里使用了附加的属性，即我一开始就谈到的json结构。
还支持参数，请在文档@ ngx-translate / core中进行查看 。 使用参数，您可以实现类似于字符串插值的功能。
在组件代码中
this.translateService.get(['KEY1', 'KEY2'])) .subscribe(translations => { console.log(translations['KEY1']) console.log(translations['KEY2']) });
如果您对Observable和RxJ正常，这是一种可靠的方法。
如果没有，有一种方法：
this.translateService.instant('Key')
此方法效果很好，但是在应用程序初始化阶段（例如ngOnInit AppComponent），可能尚未加载该数据。 小心点
支持.json文件
最后，我想展示如何使用ngx-translate-extract实用程序。 只需在ngx-translate-extract -i ./src -o src/assets/locale/*.json --sort --format namespaced-json运行命令ngx-translate-extract -i ./src -o src/assets/locale/*.json --sort --format namespaced-json 。 此命令将开始分析应用程序文件，标记和时间码代码。 在标记和其他代码中找到的所有键对于所有语言都将落入.json，现有键及其值将保持不变，除非顺序可能会改变。
为了方便起见，我将其作为脚本添加到package.json中
"scripts": { "ng": "ng", "start": "ng serve", "update-locale": "ngx-translate-extract -i ./src -o src/assets/locale/*.json --sort --format namespaced-json" },
我描述的所有内容都可以在一个开放的存储库中组装在一起： valentinkononov / ngx-translate-angular
我希望这些材料会有用！ 愉快地编写代码，选择方便的库并创建有用的项目！