标签：image   解释   javascrip   代码   乐意   本地   seve   port   作用   

壹 ? 引

最近项目要求支持国际化多语言，由于项目用的还是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文件中引入相关资源，如下：

在项目目录下新建一个language文件夹，用于存放我们的语言列表，这里我们就建两个，一个中文一个英文，如下：

我们在en.json中添加如下代码

{
    "name": "echo",
    "age": "twenty-seven"
}

我们在zh.json中添加如下代码：

{
    "name": "听风",
    "age": "27"
}

好的，现在我们创建HTML页面主体部分，以及对应的controller，如下：

  
{{"name"|translate}}
  

  英文
中文

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中添加如下两行：

{{vm.myName|translate}}

刷新页面，可以看到生效了，这里我们就是将key赋予了一个变量，通过上述两种方式能解析key为变量的情况。

对应的，那么假设JSON配置的value中包含变量怎么办呢，直接看下面这个例子：

我们在JSON中英文中分别添加如下代码：

// en.json
{
    "sayName":"my nam is {{userName}}"
}
// zh.json
{
    "sayName":"我的名字是{{userName}}"
}

在HTML中添加如下代码：

{{ ‘sayName‘ | translate:‘{ userName: "听风是风" }‘ }}

其实说到底就是为过滤器传递罢了，考虑到vaule中包含多个变量的情况，如果全写在HTML上就不太美观了，所以我们可以将值定义成一个对象，我们分别在controller与HTML中添加如下代码：

vm.userName = {
    userName: ‘听风是风‘
};

{{ ‘sayName‘ | translate:vm.userName}}

其实效果还是一样，看着也舒服了很多，万一存在多个变量，咱们也是为controller中的对象添加属性而已。

叁 ? 贰 在controller中使用国际化

上面例子举了一大堆，其实都是在HTML上使用过滤器实现语言国际化，那么问题来了，假设我在controller中有一个弹窗，弹窗内容也得支持国际化，这个文本咋整呢？我们使用$translate.instant()方法，看个例子：

请分别在HTML于controller中添加如下代码：

点我

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()为什么不生效

标签：image   解释   javascrip   代码   乐意   本地   seve   port   作用   

原文地址：https://www.cnblogs.com/echolun/p/12762839.html