本文介绍如何使用 npm 包 angular-message-format 实现 Angular 应用中的消息国际化。
什么是 angular-message-format？
angular-message-format 是一个小而强大的库，它是 Angular 应用中使用消息国际化的一种可选方案。它结合了 Angular 的内置 i18n 功能和 MessageFormat 的格式化功能，提供了一个灵活的和易于使用的消息国际化方案。
安装 angular-message-format
可以使用 npm 安装 angular-message-format：
--- ------- ---------------------- ------
在 Angular 应用中使用 angular-message-format
1. 注册 angular-message-format 的服务提供商
在 app.module.ts 中注册服务提供商：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - --------------------- --------------------- - ---- -------------------------
-----------
-------- ----------------
------------- ---------------
---------- -
---------------------
- -------- ---------------------- --------- - -------- ------ ----- - -
--
---------- --------------
--
------ ----- --------- - -2. 在模板中使用消息
在模板中使用 i18n 属性来标记消息，同时使用 messageFormat 指令来格式化消息：
-- ----------- --- -- ----- -- -- ------ ------- --- ------- ----- -------- ------- -- ----------------------- --- - ------ ------- ------- - - ------ ------- --- ------- ----- -------- ---- ------ -------
在上面的示例中，i18n 属性是标准的 Angular i18n 属性，用来标记该消息是一个需要翻译的消息。而 messageFormat 指令使用指定的文本和任意数量的参数来将消息格式化。
注意，这里 {{ count }} 是标准的 Angular 绑定语法。在指令中，我们使用了 { count } 语法来代表相同的变量。
3. 设置消息的翻译
使用 Angular 的内置 i18n 工具来为消息进行翻译。可以使用命令行工具 ng 来提取所有需要翻译的消息：
-- ----- ------------- ----
这会将所有需要翻译的消息提取到 i18n 目录下的 messages.xlf 文件中。可以使用任何 XLIFF 编辑器来进行翻译。
4. 在应用中自动翻译消息
可以使用 Angular 的内置 i18n 工具来将 XLIFF 文件中的消息自动翻译。可以使用 Google 翻译服务或者其他翻译服务来自动翻译消息。
-- ----- ------------- ---- ------------- --- ------------- -- -------------------------- ------ ----------------------------- ---- --------------------- ----------------------------------------------------
在上面的示例中，我们使用了 Google 翻译服务来自动翻译消息。可以将 i18n-locale 参数设置为相应的语言代码，以进行不同语言的自动翻译。
5. 在应用中手动翻译消息
也可以手动翻译消息。只需要在翻译完成之后将翻译后的消息保存在 i18n 目录下以相应的语言代码为文件名的文件中即可。
6. 在应用中使用多语言
angular-message-format 支持多语言的使用。只需要在应用中注册不同的 locales 即可支持多语言：
---------- - --------------------- - -------- ---------------------- --------- - -------- ------ ----- - - --
然后在应用中使用不同的语言即可：
------------- ---------- -------------------- ------------- ---------------------- ------- - ---------- ----- ------------------------
总结
angular-message-format 提供了一个灵活和易于使用的消息国际化方案。它结合了 Angular 的内置 i18n 功能和 MessageFormat 的格式化功能，使得在 Angular 应用中使用消息国际化变得更加简单。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/185975