在前端开发中，我们经常需要处理多语言的需求，而@ngx-translate/core 就是一个高质量、易于使用并且支持各种翻译后端的 Angular 上的多语言库。下面，我们来详细介绍一下如何使用它。
安装
你可以通过下面的命令来安装 @ngx-translate/core：
npm install @ngx-translate/core --save
你还需要安装翻译后端库，@ngx-translate/core 内置了 HTTP 后端，如需使用其他后端，需额外安装，并且参照文档进行配置。
使用
初始化
- 引入 TranslateService 服务
首先，你需要在使用 TranslateService 服务的组件中引入 TranslateService。
import { TranslateService } from '@ngx-translate/core';- 初始化 TranslateService
你需要在你的应用启动文件中进行 TranslateService 的初始化，在这里我们采用 HttpServer 后端作为例子。
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
------ - ---------------- --------------- - ---- ----------------------
------ - ------------------- - ---- -----------------------------
------ -------- ----------------------- ----------- -
------ --- --------------------------
-
-----------
-------- -
-----------------
-------------------------
------- -
-------- ----------------
----------- ------------------
----- ------------
-
--
--
---------- --------------
--
------ ----- --------- - -使用 TranslateService
- 获取语言
你需要在应用刚刚启动时就将翻译文件加载到应用程序中，有几种方法可以做到这一点，最常见的是使用 APP_INITIALIZER，让 TranslateService 初始化时立即执行加载操作：
-- -------------------- ---- -------
------ - ---------------- -------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------ - ------------ ---------- - ---- -----------------------
------ - ------------------- - ---- -----------------------------
------ -------- ------------------------------ ------------ -
------ --- ----------------------- -------------------------
-
----- ---------------------- - ------------------ ----------------- -- -- --
--------------------------------------------------
-----------
-------- ----------------------------
---------- -
-
-------- ----------------
----------- -----------------------
------ -----
----- ------------------
--
-
-------- ------------
--------- ------------------
--
-
-------- ----------------
----------- ------------------
----- -------------
-
-
--
------ ----- --------- --这里使用 toPromise() 方法将 Observable 转换为 Promise，这样可以让它返回，而不需要将我们的服务转换成 Observable。我们也可以在其他组件中注入 TranslateService，然后在 ngOnInit 生命周期中调用语言更新。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
--------- -
------ -------- -- -- ------- ----- - --------- -------
----- ------ ------- - --------- ------
------- --------------------------------- -----------------
-
--
------ ----- ------------ ---------- ------ -
----------- - -----
------------------- ---------- ----------------- --
---------- -
------------------------------------
-------------------------------------
-
---------------- -
---------------- - ---------------- --- ---- - ---- - -----
-------------------------------------
-
-总结
@ngx-translate/core 可以说是一个非常好用的 Angular 上的多语言库了。我们在使用时需要注意按照文档进行配置，并且需要引入相应的翻译后端。使用 TranslateService 服务可以非常方便地处理多语言的需求，让我们的应用程序可以轻松地适应不同地区的用户。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/ngx-translate-the-core