随着全球化的发展，越来越多的网站需要支持多语言，这就需要前端开发人员学习国际化的技术。Angular 提供了一些内置的国际化功能，但是如果需要更加灵活的国际化解决方案，可以使用 ngx-translate 库。本文将介绍如何使用 ngx-translate 库进行 Angular 国际化。
安装 ngx-translate
首先，需要安装 ngx-translate 库。可以使用 npm 安装：
npm install @ngx-translate/core --save
同时，如果需要使用 ngx-translate 的 HTTP 后端，还需要安装 @ngx-translate/http-loader：
npm install @ngx-translate/http-loader --save
配置 ngx-translate
在 Angular 中，可以在 AppModule 中配置 ngx-translate。首先，需要导入 ngx-translate 相关的模块：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';然后，在 imports 数组中添加 TranslateModule.forRoot()：
-- -------------------- ---- -------
-----------
------------- -
------------
--
-------- -
--------------
-----------------
-------------------------
------- -
-------- ----------------
----------- ------ ----------- -- -
------ --- --------------------------
--
----- ------------
-
--
--
---------- ---
---------- --------------
--
------ ----- --------- - -上述代码中，我们注册了一个 TranslateLoader，用于加载翻译文件。默认情况下，ngx-translate 会从 assets/i18n 目录下加载翻译文件，文件名为 {lang}.json，其中 {lang} 为语言代码。
创建翻译文件
在 assets/i18n 目录下创建翻译文件。例如，创建一个英文翻译文件 en.json：
{
"HELLO": "Hello, World!",
"WELCOME": "Welcome, {name}!"
}创建一个中文翻译文件 zh.json：
{
"HELLO": "你好，世界！",
"WELCOME": "欢迎，{name}！"
}使用 ngx-translate
在组件中使用 ngx-translate，首先需要在构造函数中注入 TranslateService：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
---- - -------
------------------- ---------- ----------------- -
-------------------------------
--------------------
-
-------------------- ------- -
-------------------------
-
-上述代码中，我们注入了 TranslateService，并在构造函数中设置了默认语言为英文。在 switchLanguage 方法中，我们可以切换语言。
在 HTML 中，可以使用 translate 指令来翻译文本：
<h1 translate>HELLO</h1>
<p translate>Welcome, {name}!</p>
<button (click)="switchLanguage('en')">English</button>
<button (click)="switchLanguage('zh')">中文</button>在 TypeScript 中，可以使用 translate.get 方法来获取已翻译的字符串：
this.translate.get('HELLO').subscribe((res: string) => {
console.log(res);
});同时，可以使用 translate.instant 方法来立即获取已翻译的字符串，而不需要订阅：
const hello = this.translate.instant('HELLO');
console.log(hello);使用 ngx-translate 的 HTTP 后端
如果需要从服务器动态加载翻译文件，可以使用 ngx-translate 的 HTTP 后端。首先，在 AppModule 中配置 TranslateHttpLoader：
-- -------------------- ---- -------
-----------
-------- -
--------------
-----------------
-------------------------
------- -
-------- ----------------
----------- ------ ----------- -- -
------ --- ------------------------- ----------------- ---------
--
----- ------------
-
--
--
-- ---
--
------ ----- --------- - -上述代码中，我们将 TranslateHttpLoader 的第二个参数设置为 ./assets/i18n/，表示翻译文件的路径。
然后，在组件中使用 TranslateService 的 use 方法来加载翻译文件：
constructor(private translate: TranslateService) {
translate.setDefaultLang('en');
translate.use('en').subscribe(() => {
console.log('Loaded translation file');
});
}上述代码中，我们在 use 方法中订阅了一个回调函数，当翻译文件加载完成后，会执行该回调函数。
总结
本文介绍了如何使用 ngx-translate 库进行 Angular 国际化。通过 ngx-translate，我们可以实现更加灵活的国际化解决方案，支持多语言和动态加载翻译文件。希望本文对大家学习 Angular 国际化有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662cf13ed3423812e4a7f630