壹 ❀ 引

最近项目要求支持国际化多语言，由于项目用的还是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. java基础-java面向对象-02-day09

    目录 1. 封装 2. 继承 2.1 什么是方法的重写 2.2 super 2.3 object详解 2.4 equals方法 3. 多态 4. final修饰符 5.抽象类 6. 接口 7. 内部类 ...

  2. 函数指针、std::function、std::bind

    函数指针.std::function.std::bind 函数指针: C++语法中可以直接将函数名作为指针, void fun(int a, int b); 在这个函数声明中,函数指针即为fun,传入 ...

  3. 【Mysql系列】（二）日志系统：一条更新语句是如何执行的

    有的时候博客内容会有变动,首发博客是最新的,其他博客地址可能会未同步,认准https://blog.zysicyj.top 这篇文章是从Github ReadMe拷贝的,内容实践下载是没问题的,能够正 ...

  4. 【面试题精讲】MySQL中覆盖索引是什么

    有的时候博客内容会有变动,首发博客是最新的,其他博客地址可能会未同步,认准https://blog.zysicyj.top 首发博客地址 系列文章地址 在MySQL中,覆盖索引是一种特殊类型的索引,它 ...

  5. [转帖]GPT4All 一个开源 ChatGPT

    https://zhuanlan.zhihu.com/p/618947904 通用预训练语言模型. ChatGPT 正在迅速发展与传播,新的大型语言模型 (LLM) 正在以越来越快的速度开发.就在过去 ...

  6. [转帖]tidb 搭建私有镜像库

    https://docs.pingcap.com/zh/tidb/stable/tiup-mirror 在构建私有云时,通常会使用隔离的网络环境,此时无法访问 TiUP 的官方镜像.因此,TiUP 提 ...

  7. [转帖]Jmeter学习笔记（九）——响应断言

    Jmeter学习笔记(九)--响应断言 https://www.cnblogs.com/pachongshangdexuebi/p/11571348.html Jmeter中又一个元件叫断言,用于检查 ...

  8. [转帖]Linux | crontab定时任务及开机自启项

    本文总结如何使用 crontab 创建定时任务及开启自启项 1. 本文基于 CentOS 7.9 系统所写. Updated: 2022 / 9 / 5 Linux | crontab定时任务及开机自 ...

  9. [转帖]Redis 核心篇：唯快不破的秘密

    文章系转载,方便整理和归纳,源文地址:https://z.itpub.net/article/detail/4B5A03BDDBE9A2BC3E080E278FE4D21E 以下文章来源于码哥字节 , ...

  10. [转帖]【redis】redis各稳定版本特性（更新到6.0版本）

    1.Redis2.6 Redis2.6在2012年正是发布,经历了17个版本,到2.6.17版本,相对于Redis2.4,主要特性如下: 1)服务端支持Lua脚本. 2)去掉虚拟内存相关功能. 3)放 ...