在移动应用开发中，国际化是十分重要的一项工作。tns-i18n 是一个基于 Angular 的国际化解决方案，可以很好地支持多语言应用的开发。本文将为你详细介绍 tns-i18n 的使用方法和注意事项。
安装
首先，我们需要使用 npm 安装 tns-i18n 包。在终端中执行以下命令：
npm i tns-i18n --save
配置
在 app.module.ts 中导入三个模块：
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; import { NativeScriptLocalizeModule } from "nativescript-localize/angular"; import { TNSI18nModule } from "tns-i18n/angular";在 imports 列表中加入这三个模块的引用：
-- -------------------- ---- ------- ----------- -------- - --------------------------- ------------------------ --- -- --- --把 TNSI18nModule 和 NativeScriptLocalizeModule 直接加到 imports 列表中。在 NO_ERRORS_SCHEMA 中加入 TNSI18nModule 所依赖的 module。
-- -------------------- ---- ------- ----------- -------- - --- --------------------- --------------------------- -- -------- ------------------- --
使用
定义消息（messages）和语言（locales）
- 在项目根目录下创建 locales 子目录
- 在 locales 目录下创建 messages.json 文件，并定义你的消息（key-value 键值对）
- 在 locales 目录下创建类似 en-US，zh-CN 这样的文件夹，并在这些文件夹中创建 messages.json，分别定义这种语言下的消息
- messages.json 中的键名就是我们使用时的字符串，值就是对应的本地化字符串
- 例如 messages.json 中定义了 "hello": "你好"，则我们在代码中使用 "hello" 就会得到 "你好" 这个字符串
{ "hello": "你好", "bye": "再见" }使用翻译服务
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------ - ---------------- - ---- ------------------- ------------ --------- ------- ------------ ----------------------- -- ------ ----- ------------- ---------- ------ - ------------ ------- ---------- ---------------- - - - ---------- - --------------------------------------------- - -- 使用 TranslateService 可以得到一个包含翻译方法的实例。它提供了一个“instant”方法来直接得到一个翻译后的字符串。
- 使用 instant 方法，我们可以传入 messages.json 中的键值来得到本地化字符串。
- instant 方法支持 node.js 风格的占位符，比如
${variableName}。 - 例如：
console.log(this.translate.instant("salary", {name: "小明", amount: 1000}));
当语言发生变化时更新 UI
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------ - ---------------- - ---- ------------------- ------------ --------- ------- ------------ ----------------------- -- ------ ----- ------------- ---------- ------ - ------------ ------- ---------- ---------------- - - ---------------------------------------------- -- - --------------------------------------------- --- - ---------- - --------------------------------------------- - -- TranslateService 还提供了一个名为 onLangChange 的 Observable，它会在当前语言发生变化时触发。
- 通过订阅 onLangChange，我们可以在语言发生变化时更新 UI。
意义与指导
tns-i18n 可以很好地方便我们进行多语言的开发。通过提供依赖注入机制、Observable 订阅等工具，还简化了我们在语言切换时需要更新的内容。因此，对于需要国际化的应用程序，使用 tns-i18n 非常友好。
完整的 TypeScript 示例代码：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------------- - ---- -------------------
------------
--------- ---------
--------- -
------ -------- ----- ------------
------ -------- --- ------------
-
--
------ ----- ------------ ---------- ------ -
------ -------
---- -------
------------------- ---------- ----------------- - -
---------- -
---------- - --------------------------------
-------- - ------------------------------
---------------------------------------- -- -
---------- - --------------------------------
-------- - ------------------------------
---
-
-
快来使用 tns-i18n 吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf581e8991b448e6b26