$translate改变语言没有立即执行翻译

Posted 2020-09-07 名字不好起啊

　　现在很多软件都已支持多语言，我们项目中也不例外。angular 的 $translate 很好用，进行简单的配置就能使用多种语言，这里不详细讲解它的配置什么的，百度一下太多了。。。

　　我们使用 $translate.use(language) 来实现语言的切换，然后它会自动的去加载对应的 .json 文件，实现语言的翻译切换，真的很好用哦~

　　我们还可以通过 $translate.use() 的方式来对现应用的语言进行获取。

　　那么就进入详细问题的出现以及解决过程环节啦！

　　起初项目完结后的回归测试没有发现此问题，可能是真的小，而且不影响使用，近期修改英文翻译支持时，才偶然间发现的这个问题：刷新界面，首次切换语言预览语言效果后，维度显示配置的指令树的表头翻译没有翻译成功。

　　于是就开始找原因，打断点，发现首次切换语言，进入了切换语言的方法，而且也切换了语言，同时改变了表头绑定的变量的翻译，但是却并未触发指令的属性监听，仔细看其值发现，翻译的内容与刷新后未切换的语言翻译是相同的，这意味着语言切换后，在执行表头翻译时，表头翻译过程中对照的翻译还是之前的语言版本 .json 文件。

　　问题大致确定原因范围了，可能是翻译用的 .json 未完成加载就执行了对表头的翻译，结果导致跟原来语言的翻译内容一样。

　　然后接着点点看，又发现了个小问题，项目中支持3种语言：简体中文、繁体中文、英文。系统默认是支持简体中文的，而设置成英文语言保存后刷新界面，再切换回简体中文时，发现表头翻译刷新了，变成了简体中文；又试了试刷新后切换到繁体中文，结果表头翻译未正常刷新。看了看请求，发现了问题所在，因为项目默认支持的是简体中文，所以在页面初始化时应用的就是简体中文的 .json 文件，后来页面完全加载完成，有了用户信息后，发现用户是英文配置，于是又修改成英文翻译，加载了英文的 .json 文件。

　　问题到这里基本上就肯定了初步的推测，表头的翻译未刷新就是因为 .json 文件。估计也没别的可能了，想了几种解决办法，$q 的顺序执行啊，什么的，但是对于没有返回值的 $translate 来说，貌似没有用。那就只能手动延时翻译了。

　　使用了 $timeout，延迟 200 毫秒执行表头的翻译操作，试了试，果然有用，不过定时器毕竟不是那种顺序执行的方法，万一网速特慢，200 毫秒内 .json 文件未加载完成怎么办，岂不是初次刷新后的切换语言还是会有问题？于是将定时器改成了 1 毫秒执行，结果。。。还是好使的。

　　这个问题其实最终都没有确定结论到底是什么原因，不过加了定时器确实好使了，只能等到以后成了大牛了再回头看看自己的博客，没准还能解开呢，哈哈~