Aurelia本地化

Aurelia是一种现代的JavaScript框架，提供了广泛的功能，其中包括本地化支持。在这篇文章中，我们将介绍Aurelia中的本地化和如何在您的应用程序中使用它。

什么是本地化？

本地化是将应用程序定制为适合特定语言和地区的过程。这包括将文本翻译成语言，以及根据所使用的地区调整文化相关的元素如日期时间格式或货币符号。本地化是创建全球化应用程序的必要条件。

Aurelia中的本地化

Aurelia提供了一个名为aurelia-i18n的工具包，它能够轻松实现对应用程序的本地化。此工具包基于国际化标准（也称为 “i18n”）。它包括以下主要功能：

• 翻译文本
• 处理日期和时间
• 处理货币和数字格式

安装Aurelia-i18n

步骤1：安装

您可以使用npm安装aurelia-i18n：

npm install aurelia-i18n --save

步骤2：配置

在应用程序中设置本地化，在main.js或main.ts文件中添加以下代码：

import { Aurelia } from 'aurelia-framework';
import { I18N, Backend, TCustomAttribute } from 'aurelia-i18n';
import XHR from 'i18next-xhr-backend';

export async function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .plugin('aurelia-i18n', (instance) => {
      let aliases = ['t', 'i18n'];
      // add aliases for 't' attribute
      TCustomAttribute.configureAliases(aliases);
    
      // register backend plugin
      instance.i18next.use(XHR);

      // adapt options to your needs (see http://i18next.com/docs/options/)
      // make sure to return the promise of the setup method, in order to guarantee proper loading
      return instance.setup({
          backend: {                                  // <-- configure backend settings
            loadPath: './locales/{{lng}}/{{ns}}.json', // <-- XHR settings for where to get the files from
          },
          attributes: aliases,
          lng : 'en',
          fallbackLng : 'en',
          debug : false
        });
    });

  await aurelia.start();
  aurelia.setRoot('app');
}

此配置仅仅是示例，你需要根据你自己的应用程序需求适当调节配置。详情请查看aurelia-i18n的文档。

使用Aurelia-i18n

在完成aurelia-i18n的配置之后，您就可以开始在应用程序中使用本地化了。

翻译文本

使用$t(key)方法翻译文本。key是定义翻译文本的字符串。在翻译文件中，将为此字符串提供翻译版本。如下是一个简单的示例：

// app.html
<template>
  <div>${'welcome'|t}</div>
  <button click.trigger="changeLanguage()">${'changeLanguageBtn'|t}</button>
</template>

// app.js
import { inject } from 'aurelia-framework';
import {I18N} from 'aurelia-i18n';

@inject(I18N)
export class App {
  constructor(private i18n: I18N) {}

  changeLanguage(){
    if(this.i18n.getLocale() === 'en'){
      this.i18n.setLocale('de');
    }else{
      this.i18n.setLocale('en');
    }
  }
}

// locales/en/translation.json
{
  "welcome": "Welcome!",
  "changeLanguageBtn": "Change Language"
}

// locales/de/translation.json
{
  "welcome": "Willkommen!",
  "changeLanguageBtn": "Sprache Ändern"
}

在这个示例中，当应用程序被加载时，它将显示“欢迎！”和“更改语言”按钮。单击按钮时，语言将被切换到另一种语言版本，这将导致翻译文本的变化。

处理日期和时间

使用$d(value)方法处理日期和时间。value是日期对象或毫秒数。您可以使用各种选项将格式器应用于日期和时间值，例如日历选项、时区选项等。有关全部选项列表，请查看aurelia-i18n的文档。以下是使用本地化处理日期的示例：

// app.html
<template>
  <div>This is today's date: ${new Date()|$d}</div>
  <div>This is the time: ${new Date()|$d:'time'}</div>
  <div>This is the date: ${new Date()|$d:'date'}</div>
</template>

// locales/en/translation.json
{
  "shortDateFormat": "MM-DD-YYYY",
  "longDateFormat": "dddd, MMMM DD, YYYY",
  "timeFormat": "h:mm:ss a"
}

// locales/de/translation.json
{
  "shortDateFormat": "DD.MM.YYYY",
  "longDateFormat": "dddd, D. MMMM YYYY",
  "timeFormat": "HH:mm:ss"
}

在这个示例中，当应用程序被加载时，将显示当前日期和时间。日期和时间会根据应用程序当前所使用的区域进行格式化。

处理货币和数字格式

使用$n(value)方法处理货币和数字格式化。value是待格式化的数字。与日期和时间格式不同，对于货币和数字格式化，所有选项都依赖于当前的区域设置。以下是使用本地化处理货币和数字格式的示例：

// app.html
<template>
  <div>This is a number: ${1000|$n}</div>
  <div>This is a currency: ${1000|$n:'currency'}</div>
</template>

// locales/en/translation.json
{
  "currencyCode": "USD"
}

// locales/de/translation.json
{
  "currencyCode": "EUR"
}

在这个示例中，当应用程序被加载时，将显示格式化后的数字以及货币值。货币符号的值（如美元或欧元）和货币格式在各个国家/地区都是不同的，因此它们依赖于当前的区域设置。