随着互联网的普及，用户来自世界各地，他们使用的语言也各不相同，如何为多语言用户提供良好的用户体验是一个值得关注的问题。在 Angular 项目中，如何支持多语言无疑是一个非常重要的问题。
Angular i18n 支持
Angular i18n 提供了一种简单、可重复使用、本地化的方式来处理国际化。在 Angular 中，本地化信息通常是通过在组件 HTML 模板中使用简单的标记来指定的。
1. 安装 Angular i18n
首先，我们需要在 Angular 项目中安装 Angular I18n。运行以下命令：
npm install @angular/localize --save
2. 创建本地化配置
在 Angular 中，我们可以通过使用 i18n 属性来定义要本地化的内容。在组件的 HTML 文件中添加以下代码：
<h1 i18n="@@title">Hello, world!</h1>
在这里，我们在 h1 元素上添加了 i18n 属性，并为该元素定义了一个本地化标识符 (@@title)。当 Angular 编译器碰到本地化标识符时，它会生成一个消息对象，并将该对象传递给 Angular 的本地化服务。
3. 提取本地化消息
在定义了本地化消息后，我们需要提取这些消息以便将它们转换成不同的语言。
运行以下命令：
ng extract-i18n --output-path src/locale
这会将我们应用程序中的所有 i18n 消息提取到一个特殊的 XMB 文件中，该文件存储在 src/locale 目录下。每个 i18n 消息都用一个 <msg> 标签包裹，其中包含 id 和 value 属性，分别对应于本地化标识符和本地化消息的文本内容。
4. 翻译本地化消息
提取本地化消息后，我们需要将这些消息翻译成目标语言。创建一个新的 messages.xx.xlf 文件（其中 xx 是目标语言代码），并复制提取的 XMB 文件中的内容。
-- -------------------- ---- ------- ----- ------------- ------------------ ------ ------------- ---------------------------------------------- ----- -------------------- -------------------- ------------------------ ------ ----------- ---------- ---------------- -------------- --------------- ----------------------- ------------- ------- ------- --------展开代码
5. 部署多语言应用
当我们完成了所有的翻译后，我们需要在我们的应用程序中部署多语言支持。
我们需要使用 TranslateService 将本地化消息加载到我们的应用程序中，并将其渲染成用户的首选语言。以下是一个简单的示例：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ---------------- - ---- ---------------------- ------------ --------- ----------- ------------ ---------------------- -- ------ ----- ------------ - ----- - -------------------------------- ------------------- ---------- ----------------- - ------------------------------------ - -------------------- ------- - ------------------------- - -展开代码
在这里，我们使用 TranslateService 将 title 消息加载到 title 变量中，并在用户切换语言时使用 translate.use() 方法更新当前语言版本。
ngx-translate 支持
ngx-translate 是一个易于使用且功能强大的库，它支持灵活的本地化配置，并提供了丰富的功能，如变量替换、语言数表、复数支持等。以下是一个 ngx-translate 的示例使用：
1. 安装 ngx-translate
运行以下命令来安装 ngx-translate：
npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save
2. 创建本地化配置
我们需要创建一个 i18n 目录，用于存储多语言文件。在 i18n 目录中，我们可以创建一个名为 en.json 的文件，用于存储英文本地化消息，内容如下：
{ "hello": "Hello, world!" }
3. 配置 ngx-translate
在 app.module.ts 中，我们需要导入 TranslateModule 并配置 TranslateService & TranslateLoader，代码如下：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ----------------- ---------- - ---- ----------------------- ------ - ---------------- --------------- - ---- ---------------------- ------ - ------------------- - ---- ----------------------------- ------ - ------------ - ---- ------------------ ----------- -------- - -------------- ----------------- ------------------------- ------- - -------- ---------------- ----------- ------ ----------- -- --- ------------------------- ----------------- --------- ----- ------------ - -- -- ------------- --------------- ---------- -------------- -- ------ ----- --------- --展开代码
在这里，我们将 TranslateModule 导入到应用程序的根模块中，并为其配置 TranslateLoader，以便加载 i18n 目录中的 JSON 文件。
4. 使用 ngx-translate
现在，我们可以在我们的 Angular 组件中使用 ngx-translate 来本地化翻译文本，在组件的 HTML 文件中添加以下代码：
<h1>{{ 'hello' | translate }}</h1>
在我们的组件类中，我们可以使用 TranslateService 将消息加载到 title 变量中，并在用户切换语言时更新当前语言版本：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ---------------- - ---- ---------------------- ------------ --------- ----------- ------------ ---------------------- -- ------ ----- ------------ - ------ ------- ------------------- ---------- ----------------- - ------------------------------------ - -------------------- ------- - ------------------------- - -展开代码
结论
在 Angular 项目中支持多语言是一个重要的问题，但是我们可以使用 Angular i18n 或 ngx-translate 对我们的应用进行本地化。无论使用哪种方法，我们可以将应用程序翻译成用户所需的任何语言，并提供出色的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676e732fe9a7045d0d6a0647
