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