angular-translate国际化中变量替换

解宏扬
2023-12-01

translate使用方式有两种:

1.是当成过滤器使用(指使用的格式和使用过滤器一样,{{ ‘hello' | translate }});

2.当成指令使用(使用格式和使用指令一样,<p translate="hello"></p>)

其实translate模块和自定义指令和过滤器没啥区别,国际化也可以用自定义过滤器实现,只是这是别人写好的一个模块,更符合angular的语境。

translate使用起来非常简单,如上两种方法,但是有时候国际化并不是所有东西都是静态的,国际化中可能包含变量,根据后台推送的信息展示,这个时候就需要我们在国际化中插入变量了,当然,这个问题angular开发者肯定早就已经想到了。下面就来说说插入变量的用法:

比如我要在国际化插入一个名字变量:

国际化json中:

{

"userName":"Hello {{name}}"

}//这个是国际化json文件内容,我需要根据后台变量来显示name


在视图中使用方法:

1.{{ ’userName‘ | translate:'{name:string}' }}//可以这样把name传递给translate  或者{{ ’userName‘ | translate:obj}}  $scope.obj={name:userName}

2.如果你是用指令的方式使用translate,那就这样使用:

<p translate="userName" translate-values=" {name:obj.name} "></p>//通过translate-values指令传递参数

ps:如果你使用的是2.0+版本,还可以这样定义:translate-value-name="obj.name";//通过translate-value-*来传递变量

如果你需要对变量进行使用过滤器,要在json文件中使用过滤器,不要在translate-values中使用过滤器


在js脚本中使用$translate国际化

    1.在控制器总注入$translate服务

    2.$translate.instant(key)使用这个方法可以得到key对应的value


 类似资料: