前言
随着 Web 应用的发展，前端技术已经成为一个不可或缺的部分。当我们开发一个支持多语言的 Web 应用时，如何选择一款好用的国际化库就成为很重要的问题。本文介绍一款国际化库：@logixware/ngx-translate-core，它是一个为 Angular 项目设计的翻译库，提供了一些功能来管理多语言的支持。
安装
可以通过指令 npm install --save @logixware/ngx-translate-core 或者 yarn add @logixware/ngx-translate-core 来安装。
配置
导入模块
在 Angular 的模块里导入 TranslateModule 模块：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- ---------- - ---- -----------------------
------ - ---------------- --------------- - ---- ----------------------
------ - ------------------- - ---- -----------------------------
-----------
-------- -
--------------
-----------------
-------------------------
------- -
-------- ----------------
----------- ------ ----------- -- --- --------------------------
----- ------------
-
--
--
---------- --------------
--
------ ----- --------- - -在这个配置中，我们需要注意以下几点：
- 需要导入
HttpClientModule模块支持 HTTP 请求； - 使用
TranslateLoader实现语言文件的加载； - 使用
TranslateHttpLoader库以供應用程序使用 HTTP 进行文件的加载。
Language Files
- 然后在 assets 文件夹里面新建 en.json 文件。
{
"HOME": {
"TITLE": "Home",
"WELCOME": "Welcome, {{name}}!"
}
}- 然后在 assets 文件夹里面新建 zh.json 文件。
{
"HOME": {
"TITLE": "首页",
"WELCOME": "欢迎, {{name}}!"
}
}使用
我们现在可以使用 TranslateService 进行翻译。
获取翻译文本
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
--------- -
------ ------------ - --------- -------
----- -------------- - ---------------- ------- ------
-
--
------ ----- ------------ -
------------------- ---------- ----------------- -
-------------------------------
-
-变更翻译语言
例如将语言变更为中文：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
--------- -
------ ------------ - --------- -------
----- -------------- - ---------------- ------- ------
------- --------------------------------------------
------- ---------------------------------------
-
--
------ ----- ------------ -
------------------- ---------- ----------------- -
-------------------------------
-
--------------------- -------- ---- -
-----------------------------
-
-结语
@logixware/ngx-translate-core 是一个非常好用的国际化库，不仅可以轻松实现多语言支持，而且还具有很高的语言切换速度和易用性。通过本文的学习，相信不少开发者可以更加轻松地实现国际化功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc8967216659e2445d8