angularjs国际化多语言，angular-translate教程详解，$translate.instant()为什么不生效
Posted echolun
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs国际化多语言，angular-translate教程详解，$translate.instant()为什么不生效相关的知识，希望对你有一定的参考价值。
壹 ? 引
最近项目要求支持国际化多语言，由于项目用的还是angularjs，那么首当其冲的选择了angularjs封装的I18N插件angular-translate，本文主要会从三个方向展开讨论，一是基本用法，怎么用，代码是什么意思；二是问题解答，比如$translate.instant()为什么没效，怎么在JS程序中使用多语言等；第三便是提供我的解决方案，供大家参考，那么本文开始。
贰 ? 基本用法
由于是三方插件，自然要下载才能使用，请大家在项目目录下执行npm i angular-translate命令，下载多语言相关依赖包，OK下载完成后在node_modules文件夹中可以看到如下内容：
文件虽多，我们需要用到的其实只有angular-translate.min.js与angular-translate-loader-static-files目录下的angular-translate-loader-static-files.min.js。
所以第一步，在html文件中引入相关资源，如下：
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-translate/dist/angular-translate.js"></script>
<script
src="node_modules/angular-translate/dist/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
在项目目录下新建一个language文件夹，用于存放我们的语言列表，这里我们就建两个，一个中文一个英文，如下：
我们在en.json中添加如下代码
{
"name": "echo",
"age": "twenty-seven"
}
我们在zh.json中添加如下代码：
{
"name": "听风",
"age": "27"
}
好的，现在我们创建HTML页面主体部分，以及对应的controller，如下：
<body ng-controller="myCtrl as vm">
<p>{{"name"|translate}}</p>
<p translate="age"></p>
<select name="" id="" ng-model="vm.language" ng-change="vm.change()">
<option value="en">英文</option>
<option value="zh">中文</option>
</select>
</body>
angular.module(‘myApp‘, [‘pascalprecht.translate‘])
.controller(‘myCtrl‘, [‘$translate‘, function ($translate) {
var vm = this;
vm.language = "zh";
vm.change = function () {
$translate.use(vm.language);
};
}])
.config(function ($translateProvider) {
// 读取本地JSON文件，prefix代表文件路径前缀，suffix代表文件后续
$translateProvider.useStaticFilesLoader({
prefix: ‘./language/‘,
suffix: ‘.json‘
});
// 设置默认的语言
$translateProvider.preferredLanguage(‘zh‘);
});
angullarjs其它部分大家执行搭建，做到这一步，利用live-server启动本地服务器（其它本地服务器也行）打开页面，尝试切换select选项，可以发现我们已经实现了一个简单的多语言了。
那么现在我们来解释下上述代码是什么意思，做了什么。
首先在HTML中我用了两种方式来显示多语言，一种是表达式，一种是指令形式，两种皆可，官方推荐使用指令会更好，不过有特殊情况只能用表达式，这点后面我们再说。而在代码中的name与age其实就是对应了JSON文件中数据的key，这点不难理解。
对于JS代码，第一步就是得在module中加入pascalprecht.translate模板，这样我们才能通过config对多语言进行初步配置，比如$translateProvider.preferredLanguage(‘zh‘)这一句用来设置多语言的默认语言，例子中默认的就是中文。
而$translateProvider.useStaticFilesLoader这一句其实对应了我们在HTML中引用的angular-translate-loader-static-files文件，它的作用就是用来导入项目中的其它静态文件，毕竟引用了JSON，后程序才有可供查找的语言列表；另外属性prefix用来描述文件路径，suffix用来描述你需要引用文件的后缀。
细心的同学一定想问，那程序怎么知道要去哪个JSON文件中去查呢，在上述代码config与controller分别有这两段，作用都是告诉translate应该用哪个语言表查询：
$translate.use(vm.language);
$translateProvider.preferredLanguage(‘zh‘);
再看select中option赋予的值，不是正好与我们的JSON文件名相同吗。那么关于translate基础介绍说到了，下面来聊聊使用中会遇到哪些问题。
叁 ? 进阶用法与部分问题解答
叁 ? 壹 translate key/value包含变量
我们在上文的例子中，translate查找所用的key是一个确切的值，其实说到底，所谓translate国际化，就是在不同的语言表中定义相同的key名，再根据用户操作切换不同的表作为查找根据而已。
那么问题来了，假设我们在使用时写在HTML上的key是个变量怎么办呢？不留悬念，直接看下面的例子：
我们在controller中添加如下代码：
vm.myName = ‘name‘;
然后在HTML中添加如下两行：
<p>{{vm.myName|translate}}</p>
<p translate="{{vm.myName}}"></p>
刷新页面，可以看到生效了，这里我们就是将key赋予了一个变量，通过上述两种方式能解析key为变量的情况。
对应的，那么假设JSON配置的value中包含变量怎么办呢，直接看下面这个例子：
我们在JSON中英文中分别添加如下代码：
// en.json
{
"sayName":"my nam is {{userName}}"
}
// zh.json
{
"sayName":"我的名字是{{userName}}"
}
在HTML中添加如下代码：
<p>{{ ‘sayName‘ | translate:‘{ userName: "听风是风" }‘ }}</p>
<p translate="sayName" translate-values=‘{ userName: "听风是风"}‘></p>
<p translate="sayName" translate-value-user-name=‘听风是风‘></p>
其实说到底就是为过滤器传递罢了，考虑到vaule中包含多个变量的情况，如果全写在HTML上就不太美观了，所以我们可以将值定义成一个对象，我们分别在controller与HTML中添加如下代码：
vm.userName = {
userName: ‘听风是风‘
};
<p>{{ ‘sayName‘ | translate:vm.userName}}</p>
<p translate="sayName" translate-values=‘vm.userName‘></p>
其实效果还是一样，看着也舒服了很多，万一存在多个变量，咱们也是为controller中的对象添加属性而已。
叁 ? 贰 在controller中使用国际化
上面例子举了一大堆，其实都是在HTML上使用过滤器实现语言国际化，那么问题来了，假设我在controller中有一个弹窗，弹窗内容也得支持国际化，这个文本咋整呢？我们使用$translate.instant()方法，看个例子：
请分别在HTML于controller中添加如下代码：
<button ng-click="vm.alert()">点我</button>
vm.alert = function () {
let msg = $translate.instant(‘sayName‘, {
userName: ‘echo‘
});
alert(msg);
};
这里大家自行测试，说直白点，$translate.instant接受了两个参数，第一个是你要找的key，第二个参数是传递给JSON文件中变量的值。
问题来了，有的同学说为啥我的$translate.instant无效，就是获取不到，大家直接在controller外层添加如下代码，注意，不要用事件去包裹它，看看控制台打印结果：
let msg = $translate.instant(‘sayName‘, {
userName: ‘echo‘
});
console.log(msg);//sayName
可以看到直接输出了key，并没找到我们想要的值，这是因为translate加载JSON并查找的过程是一个异步，大家可以修改加载语言引用的逻辑，比如将config修改成如下代码：
.config(function ($translateProvider) {
// 注册语言表
$translateProvider
.translations(‘en‘, {
"sayName": "my nam is {{userName}}"
})
.translations(‘zh‘, {
"sayName": "我的名字是{{userName}}"
});
// 设置默认的语言
$translateProvider.preferredLanguage(‘zh‘);
});
OK，再刷新页面看看控制台，我们发现成功获取到了。
有同学就不乐意了，这样做虽然解决了语言表异步的问题，但是语言表一旦多了，看着就非常不美观了。没事，咱们再将config改回到最初的样式，然后在controller中添加如下代码：
$translate(‘sayName‘, {
userName: ‘echo‘
}).then(function (resp) {
console.log(resp)
}, function (err) {
console.log(err)
});
$translate(key)方法返回一个promise，也就是说即便文件引用是异步的情况，我们通过这种方式也能成功获取到想要的语言内容，当然缺点也非常明显，每次做查询都得写promise回调，代码看着非常不爽。那么贴上最后的解决方法，给大家做个参考。
肆 ? 仅供参考的方案
HTML中我就不说了，主要说说config，我的写法是这样：
.config(function ($translateProvider) {
// 获取语言模块
let enLanguage = require("../language/en.js");
let zhLanguage = require("../language/zh.js");
// 注册语言表
$translateProvider
.translations(‘en‘, enLanguage.language)
.translations(‘zh‘, zhLanguage.language);
// 设置默认的语言
$translateProvider.preferredLanguage(‘zh‘);
});
而语言表就不是放在JSON文件中了，而是放在了两个JS文件中进行管理，这里我借用了mod.js让JS模块化，代码如下：
//en.js
exports.language = {
"sayName": "my nam is {{userName}}"
}
//zh.js
exports.language = {
"sayName": "我的名字是{{userName}}"
}
这么做的好处其实就两点，第一语言有独立的文件进行管理，便于后期维护；第二解决了文件加载查询异步问题，在controller中我们获取多语言就非常方便。
最后提一点，假设我们在中文中配置了一个key，因为疏忽导致在英文中忘记配置了这个key，那么用户在切换语言时因为找不到对应的key，这就会加载失败，官方在config中还提供了一个非常棒的方法，直接上代码：
$translateProvider
.translations(‘en‘, enLanguage.language)
.translations(‘zh‘, zhLanguage.language)
.fallbackLanguage([‘en‘, ‘zh‘]);
fallbackLanguage的作用就是，假设一个key查找失败，那么angular-translate就会以[‘en‘, ‘zh‘]为替补语言进行查找，以此来保证某个key找不到，你的页面至少是有一种候补语言能展示出来。
那么关于angular-translate的使用介绍就说到这里了，本文结束。
以上是关于angularjs国际化多语言，angular-translate教程详解，$translate.instant()为什么不生效的主要内容，如果未能解决你的问题，请参考以下文章