什么是 ngx-i18next ？
ngx-i18next 是 Angular 的一个非常流行的国际化插件。它可以帮助你在你的 Angular 应用程序中轻松地实现国际化和多语言支持。它基于 i18next 国际化库，可以自动检测用户浏览器的语言设置并返回相应的翻译文本。
安装 ngx-i18next
安装 ngx-i18next 很简单，只需要在项目的根目录下运行以下命令：
npm install ngx-i18next --save
配置 ngx-i18next
使用 ngx-i18next 前，需要在项目的 AppModule 中导入 NgxI18nModule 并进行配置。首先，应该从 ngx-i18next 包中导入 I18nModule：
import { I18nModule } from 'ngx-i18next';然后，你需要在 AppModule 中配置 I18nModule。在你的 AppModule 中，添加 I18nModule，同时还需要通过 use 静态方法来设置 ngx-i18next 应该使用的翻译文件：
-- -------------------- ---- ------- ------ - ---------- - ---- -------------- ------ - --- - ---- -------------- -- ------ ------ -- ---- ----------------- ------ -- ---- ----------------- -- ------ -------- -- ------ ------- ------ -- - ------ -----
在上面的例子中，我们导入了两个翻译文件：en.json 和 fr.json，然后使用静态方法 use 方法来设置 ngx-i18next 应该使用哪个文件。第二个参数表示地区，如果没有指定则使用默认的英语。
打开 app.component.html，在要翻译的元素上添加 i18n 属性。例如：
<h1 i18n>Hello World!</h1>
由于我们已经配置了 ngx-i18next 应该使用的翻译文件，ngx-i18next 会自动在视图中查找与当前语言对应的翻译字符串。
在组件中使用 ngx-i18next
不仅可以在模板中使用 ngx-i18next，还可以在组件中使用。以组件定义如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- --------------
------------
--------- -------------------
------------ --------------------------------
---------- --------------------------------
--
------ ----- ----------- -
------------------- ----- ------------ --
------------------------ -------- ---- -
-----------------------------------
-
-在组件类中，我们导入 I18nService，这个服务包含了语言列表和更改语言的方法。在上面的例子中，我们展示了 changeLanguage 方法，该方法用来更改当前语言。在模板中添加按钮：
<button (click)="changeLanguage('en')">English</button>
<button (click)="changeLanguage('fr')">Français</button>当点击按钮时，changeLanguage 方法会将当前语言更改为英语或法语。
使用 ngx-i18next 部署应用
使用 ngx-i18next 部署应用非常简单。只需将翻译文件传递给前端服务器即可。你可以将这些文件打包到应用程序中，或者可以在部署应用程序之前通过网络加载它们。
具体来说，我们可以将翻译文件打包到应用程序中。在 Angular 项目中，通常将翻译文件放置在项目根目录下的 i18n 文件夹下。例如，我们有一个叫做“en.json”的文件，它的内容如下：
{
"HELLO": "Hello World!"
}然后，我们在 app.module.ts 文件中添加以下代码：
import { I18nModule } from 'ngx-i18next';
import { use } from 'ngx-i18next';
use( require('../i18n/en.json') ); // 将翻译文件打包到应用程序中注意，这里使用 require 动态地引入了翻译文件。
现在，我们已经打包好了翻译文件。在生产环境下，这可以减少服务器请求，因为将翻译文件打包到应用程序中意味着只需要一个请求：应用程序代码。如果你需要更改某个语言，则只需要在你的本地代码库中更改相应的 en.json 文件即可。
总结
ngx-i18next 是国际化方面的一大利器。本文介绍了如何在 Angular 应用程序中使用 ngx-i18next 以及如何部署应用。希望这篇文章对你有帮助，也希望你在开发过程中能够顺利地使用 ngx-i18next。
示例代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ----------- ----------- - ---- -------------- -- -- ----------- ----
-- ------
------ -- ---- -----------------
------ -- ---- -----------------
-----------
-------- -
--------------
--------------------
--
---------- --------------
------------- ---------------
---------- --------------
--
------ ----- --------- -
------------------- ----- ------------ -
------------- -- ------
------------ ------ -- - ------ -----
-
-<h1 i18n>Hello World!</h1>
<button (click)="changeLanguage('en')">English</button>
<button (click)="changeLanguage('fr')">Français</button>-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- --------------
------------
--------- -------------------
------------ --------------------------------
---------- --------------------------------
--
------ ----- ----------- -
------------------- ----- ------------ --
------------------------ -------- ---- -
-----------------------------------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558d381e8991b448d6247