Aurelia - 本地化

Aurelia本地化 - 从简单和简单的步骤学习Aurelia，从基本到高级概念，包括概述，环境设置，第一个应用程序，配置，依赖注入，组件，组件生命周期，自定义元素，插件，数据绑定，绑定行为，转换器，事件，事件聚合器，表单，HTTP，参考，路由，历史，动画，对话框，本地化，工具，安全性，捆绑，调试，社区，最佳实践。

Aurelia提供 i18n 插件.在本章中，您将学习如何使用此插件本地化您的应用程序.

步骤1 - 安装插件

打开命令提示窗口并运行以下代码来安装 i18n 插件.

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-i18n

我们还需要安装后端插件.

C:\Users\username\Desktop\aureliaApp>jspm install npm:i18next-xhr-backend

第2步 - 创建文件夹和文件

在项目根文件夹中，我们需要创建 locale 目录.

C:\Users\username\Desktop\aureliaApp>mkdir locale

在此文件夹，您需要为您想要的任何语言添加新文件夹.我们将使用 translation.js 文件创建 en .

C:\Users\username\Desktop\aureliaApp\locale>mkdir enC:\Users\username\Desktop\aureliaApp\locale\en>touch translation.json

第3步 - 使用插件

您需要使用手动引导才能使用此插件.有关更多信息，请查看配置章节.我们需要将 i18n 插件添加到 main.js 文件中.

main.js

import {I18N} from 'aurelia-i18n';import XHR from 'i18next-xhr-backend';export function configure(aurelia) {   aurelia.use   .standardConfiguration()   .developmentLogging()   .plugin('aurelia-i18n', (instance) => {      // register backend plugin      instance.i18next.use(XHR);      // adapt options to your needs (see http://i18next.com/docs/options/)      instance.setup({         backend: {                                              loadPath: '/locales/{{lng}}/{{ns}}.json',         },         lng : 'de',         attributes : ['t','i18n'],         fallbackLng : 'en',         debug : false      });   });   aurelia.start().then(a => a.setRoot());}

第4步 - 翻译JSON文件

这是您可以设置翻译值的文件.我们将使用官方文档中的示例. de-DE 文件夹实际上应该用于翻译德语，但我们会使用英语短语，以便于理解.

translation.json

{   "score": "Score: {{score}}",   "lives": "{{count}} life remaining",   "lives_plural": "{{count}} lives remaining",   "lives_indefinite": "a life remaining",   "lives_plural_indefinite": "some lives remaining",   "friend": "A friend",   "friend_male": "A boyfriend",   "friend_female": "A girlfriend"}

步骤5 - 设置区域设置

我们只需要导入 i18n 插件并将其设置为使用JSON代码来自 de-DE 文件夹.

app.js

import {I18N} from 'aurelia-i18n';export class App {   static inject = [I18N];   constructor(i18n) {      this.i18n = i18n;      this.i18n      .setLocale('de-DE')      .then( () => {         console.log('Locale is ready!');      });   }}

第6步 - 查看

有几种方法可以翻译数据.我们将使用名为 t 的自定义ValueConverter.您可以在以下示例中看到各种格式化数据的方法.将其与 translation.json 文件进行比较，您会发现用于格式化的模式.

当我们运行应用程序时，我们将获得以下输出.

Aurelia本地化示例