壹 ❀ 引

最近项目要求支持国际化多语言，由于项目用的还是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()为什么不生效的更多相关文章

  1. windows上安装Anaconda和python的教程详解

    一提到数字图像处理编程,可能大多数人就会想到matlab,但matlab也有自身的缺点: 1.不开源,价格贵 2.软件容量大.一般3G以上,高版本甚至达5G以上. 3.只能做研究,不易转化成软件. 因 ...

  2. 史上最全的maven pom.xml文件教程详解

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  3. webpack安装配置使用教程详解

    webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...

  4. 重置出错？微软Win10平板Surface Pro 4重装系统教程详解

    重置出错?微软Win10平板Surface Pro 4重装系统教程详解 2015-12-11 15:27:30来源:IT之家作者:凌空责编:凌空 评论:65 Surface Pro 4系统重置出错该怎 ...

  5. Webstorm使用教程详解

    Webstorm使用教程详解 Webstorm垂直分栏.左右分栏 Webstorm 主题.背景.颜色等设置的导入导出   使用WebStorm开发web前端 网页中文乱码问题的解决方案 Webstor ...

  6. Angular 6.X CLI(Angular.json) 属性详解

    Angular CLI(Angular.json) 属性详解 简介 angular cli 是angular commond line interface的缩写,意为angular的命令行接口.在an ...

  7. Linux C 语言之 Hello World 详解

    目录 Linux C 语言之 Hello World 详解 第一个 C 语言程序 程序运行原理 编译,链接 运行时 链接库 编译器优化 Hello World 打印原理 stdout, stdin 和 ...

  8. [转]C语言字节对齐问题详解

    C语言字节对齐问题详解 转载:https://www.cnblogs.com/clover-toeic/p/3853132.html 引言 考虑下面的结构体定义: typedef struct{ ch ...

  9. Pycharm新手使用教程(详解)

    Pycharm新手使用教程(详解) [注]: 如果想要下载Pycharm工具,直接去<开发工具>中进行下载. 简介 Jetbrains家族和Pycharm版本划分: pycharm是Jet ...

  10. 经典Spring入门基础教程详解

    经典Spring入门基础教程详解 https://pan.baidu.com/s/1c016cI#list/path=%2Fsharelink2319398594-201713320584085%2F ...

随机推荐

  1. FGC频繁导致CPU 飙升定位及JVM配置优化总结

    本文为博主原创,未经允许不得转载: 目录: 1. 定位消耗cpu 的服务进程和线程 2. 定位FGC 的原因 3. 定位jvm 参数是否导致FGC 4. 调试最优解的 jvm 配置 描述:项目中存在一 ...

  2. vue 中对style、disable 等样式进行条件判断

    本文为博主原创,未经允许不得转载: 一 原生用法 style="width: 100%; margin-top: 20px" disabled 二  三元表达式 <a :st ...

  3. spring启动流程 (5) Autowired原理

    构造方法参数Autowire BeanClass可以在构造方法上标注@Autowired注解,Spring在创建Bean实例时将自动为其注入依赖参数 Spring会优先使用标注@Autowired注解 ...

  4. Oracle数据库如何解决创建用户名开头必须要C##问题？

    1.问题 我们在创建用户,概要文件等时,由于使用的是容器数据库,其文件名必须以C##开头. 我们在学习过程中暂时不需要对齐进行区分,所以如何修改这个设定呢? 2.解决 参考链接如何解决创建用户名开头必 ...

  5. WebStrom中解决中文乱码——2021050

    1.首先将IDE Encoding,Project Encoding和下面的Default Encoding for properties file设置为utf-8 2.在HTML中添加 <me ...

  6. [转帖]Jmeter常用配置元件（二）：“HTTP Cookie管理器”登录状态保持

    在API接口测试过程中,我们需要传递cookie值作为连接状态的保持,例如登录后状态信息.通过使用Jmeter提供的"HTTP Cookie管理器"来实现. 一般情况下不需要输入什 ...

  7. [转帖]一个轻量的Linux运维监控脚本

    https://zhuanlan.zhihu.com/p/472040635 写在前面 我的需求 嗯,有几台很老的机器,上面部署的几个很老的应用 我需要每周对机器上的一些内存,磁盘,线程,应用和数据库 ...

  8. [转帖]Sar的一次使用案例

    https://www.jianshu.com/p/b93342d43e13 问题现象 有一台机器,在某个时间点OS类似无响应,造成使用者感觉在该时间点机器应该发生重启,就此问题进行分析. 日志查看 ...

  9. [转帖]nacos开启强鉴权

    注意 Nacos是一个内部微服务组件,需要在可信的内部网络中运行,不可暴露在公网环境,防止带来安全风险. Nacos提供简单的鉴权实现,为防止业务错用的弱鉴权体系,不是防止恶意攻击的强鉴权体系. 如果 ...

  10. [转帖] Linux文本命令技巧(下)

    https://www.cnblogs.com/codelogs/p/16060108.html 简介# 前一篇介绍了Linux中一些基本的文本命令与使用技巧,但是结合场景过少,本篇结合工作中一些常见 ...