angularjs 前端翻译方案

未分类

首先引入翻译插件

运行 npm install --save angular-translate

页面中加入

<script type="text/javascript" src="yourpath/angular.min.js"></script>
<script type="text/javascript" src="yourpath/angular-translate.min.js"></script>
<script type="text/javascript" src="yourpath/angular-translate-loader-static-files.min.js"></script>

新建文件夹i18n用于存放翻译字典，在文件夹内部新建 en.json, zh-hans.json

//zh-hans.json
{
"Edit":"编辑",
}

//en.json
{
}

在angularjs 设置中注入翻译模块

var myApp = angular.module('myApp', ['pascalprecht.translate'])
.config(['$translateProvider',function($translateProvider){
//读取存储中的语言设置，默认使用中文的json文件名
    var lang = window.localStorage['lang'] || 'zh-hans';  
    $translateProvider
        .preferredLanguage(lang)
        .useStaticFilesLoader({
            prefix: 'app/i18n/', //读取json文件的地址
            suffix: '.json' //读取json文件的后缀
        })
        .useSanitizeValueStrategy('escape');//过滤掉翻译文本的XSS攻击
}])

切换翻译文本

localStorage.setItem('lang',str);

在LeapAI中由于还要切换后台返回的信息的语音，所以会在回调中执行：

loginRequest.switchLang(str)
.then(success=>{
    localStorage.setItem('lang',str);
    document.location.reload();
},error=>notice.error(error));

在HTML中使用

 <div>{{ app | translate}}</div> //app值为'Edit'  最终显示： 编辑
 <div>{{ 'Edit' | translate}}</div>//最终显示： 编辑
 <div ng-bind="'Edit' | translate"></div>//最终显示： 编辑

在Javascript中使用

//首先在控制器上引入$translate服务
xxController($state, $translate,...){
    let str = $translate.instant("Edit");
    console.log(str);
    //控制台输出 编辑
}

同英文不同中文含义的处理

比如No 在选择中是 否 的意思，在项目显示中是 无的意思

那么我们可以通过使用其他标志来比较方便地解决这个问题

//zh-hans.json
{
"Edit":"编辑",
"No":"否",
"No_dont_have":"无"
}

//en.json
{
    "No_dont_have":"No"
}

这时候 去翻译 No_dont_have， 在英文模式下显示的就是 No 在中文模式下显示 无
翻译 No ， 在英文模式下现实的是No （无匹配返回原文），在中文模式下显示 否

常用的字段

gettext
替换
$translate.instant
{{::'
'|translate}}