本文主要介绍的是AngularJS部分的汉化。
Angular在其官网已有国际化相关的文档描述。详情可移至Angular官网查看。
1、在Redash的目录下的package.json中,添加:
"angular-translate": "^2.18.1",
2、主目录的\client\app\config\index.js文件中,头部添加:
import 'angular-translate';
然后在下面的requirement变量中添加:
'pascalprecht.translate'
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文件
文中添加翻译的内容:
//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>