$translateProvider.useStaticFilesLoader({
prefix: '/resources/js/i18n/',
suffix: '.json'
});
前台渲染的语言切换随着 前后端分离应用的越来越广。angular-translate.js 是比较好的前端多语言插件。
可是有个问题一直困扰着我们。 刷新时 闪烁问题。
原因是 语言文件的异步加载。HTML已经解析好了 ,但是 我们的 语言包 文件还没有加载好。
网上有好多 方法 ,就是 先隐藏HTML 中的 标签 等 语言包文件加载好后,再渲染 标签,就好了。
这个方法不错,但要在原来的基础上改好的东西。我比较懒,所以就想了其他的办法。
就是 在Head 标签里面用<script> 标签 加载语言文件包。
<script src="./en.js"></script>
<script src="./cn.js"></script>
把语言包文件 的文件类型由 json 改为 js文件。里面的内容改为如下:
en.js 文件
var mmen={
"headline": "Hello there, This is my awesome app!",
"intro": "And it has i18n support!"
}
cn.js文件
var mmcn={
"headline": "你好!",
"intro": "很高兴认识你!"
}
然后 替换 最上面的代码为
$translateProvider.translations('en',mmen);
$translateProvider.translations('cn',mmcn);
到处结束 再刷新页面 也不会出现 闪烁问题了。
如果语言包较大 可以 先按上面的方法加载一个语言包。然后再异步加载 另一个 语言包。