本文主要介绍的是AngularJS部分的汉化。

Angular在其官网已有国际化相关的文档描述。详情可移至​Angular官网​查看。


1、在Redash的目录下的package.json中,添加:

"angular-translate": "^2.18.1",

Redash 汉化,支持国际化_json


2、主目录的\client\app\config\index.js文件中,头部添加:

import 'angular-translate';

Redash 汉化,支持国际化_json_02


然后在下面的requirement变量中添加:

'pascalprecht.translate'


Redash 汉化,支持国际化_主目录_03

3、接着在主目录的\client\app\index.js文件中添加(自行比对代码新增部分):

import ngModule from '@/config'; import ZHinternationalization from '@/i18n/zh'; import ENinternationalization from '@/i18n/en';  ngModule.config(($locationProvider, $compileProvider, uiSelectConfig, $translateProvider) => {   $compileProvider.debugInfoEnabled(false);   $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|data|tel|sms|mailto):/);   $locationProvider.html5Mode(true);   uiSelectConfig.theme = 'bootstrap';    $translateProvider     .translations('zh', ZHinternationalization)     .translations('en', ENinternationalization)     .preferredLanguage('zh'); });

4、在app目录下创建i18n文件夹,在文件夹中创建zh.js和en.js文件

Redash 汉化,支持国际化_ide_04

文中添加翻译的内容:

//zh.js const internationalization = {   'Dashboards': '仪表板' }   export default ZHinternationalization;
//en.js const internationalization = {   'Dashboards': 'Dashboards' }   export default ENinternationalization;

5、修改HTML页面中需要进行国际化翻译的内容,格式如下:

修改前:

<a class="btn" href="dashboards">Dashboards</a>

修改后:

<a class="btn" href="dashboards">{{ 'Dashboards' | translate }}</a>