简介
ng2-translate 是一个基于 Angular 的国际化插件，在前端开发中非常常用。通过使用 ng2-translate，我们可以轻松实现多语言切换的功能，并且兼容 Angular2 及以上版本。本文将详细介绍如何使用这个 npm 包。
安装
在安装之前，需要先确保已经安装了 Node.js 和 npm。接下来执行以下命令进行安装：
npm install @ngx-translate/core @ngx-translate/http-loader
配置
首先，需要在 app.module.ts 中导入 TranslateModule 和 HttpClientModule 模块，并将其添加到 import 数组中：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ----------------- ---------- - ---- -----------------------
------ - ---------------- --------------- - ---- ----------------------
------ - ------------------- - ---- -----------------------------
------ - ------------ - ---- ------------------
------ -------- ----------------------- ----------- -
------ --- --------------------------
-
-----------
------------- -
------------
--
-------- -
--------------
-----------------
-------------------------
------- -
-------- ----------------
----------- ------------------
----- ------------
-
--
--
---------- ---
---------- --------------
--
------ ----- --------- - -接着，在 app.component.ts 中使用 TranslateService 来引入页面所需要的语言文件。可以在构造函数中注入 TranslateService，在 ngOnInit 中调用 addLangs 进行语言配置，然后使用 use 切换语言。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ ---------- ------ -
----- - ----------------
------------------- ---------- ----------------- --
----------- ---- -
------------------------------ -------
------------------------------------
-------------------------
-
-------------------- ------- -
-------------------------
-
-最后，在 html 上使用 translate pipe 来获取对应的字符串，使用方法如下：
<p>{{ 'HOME.TITLE' | translate }}</p>其中 HOME.TITLE 为在对应的语言文件中定义的 key 值。
语言文件
在 assets/i18n 目录下定义语言文件，可以按照以下格式进行定义，在每个语言文件中不同的 key 值则对应不同的翻译。
{
"HOME": {
"TITLE": "Welcome to my website!",
"DESCRIPTION": "This is my website.",
"BUTTON": "Click me"
}
}总结
以上就是 npm 包 ng2-translate 的使用教程。通过本文的介绍，我们可以轻松学习到如何使用 ng2-translate 实现多语言的功能，以及如何进行语言文件的配置，使我们的网站可以面向不同国家的用户。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60927