AngularJS带待翻译参数的翻译表达式实现方法问询

我来帮你解决这个翻译配置的问题，按照你的需求，我们需要实现嵌套翻译的效果——也就是download文本里的msg会动态对应到不同的子翻译项。下面是一步步的配置方法：

1. 先修正HTML里的翻译指令写法 #

你原来的代码里translate-values的语法有点小问题，而且translation指令应该是translate（这是angular-translate库的标准指令）。修正后的HTML应该是这样：

<div translate="download" translate-values="{ msg: 'file.pdf' }"></div>
<div translate="download" translate-values="{ msg: 'file.pic' }"></div>

如果习惯用单引号也可以，效果完全一致：

<div translate="download" translate-values="{'msg': 'file.pdf'}"></div>
<div translate="download" translate-values="{'msg': 'file.pic'}"></div>

2. 配置语言文件 #

英文(en.json) #

你原来的en.json结构需要微调一下，把translation管道改成translate（这是angular-translate的默认管道），确保嵌套的翻译key能被正确解析：

{
  "download": "Download {{ msg | translate }}",
  "file": {
    "pdf": "pdf file",
    "pic": "pictures"
  }
}

波兰语(pl.json) #

按照你期望的波兰语结果来配置，我调整了拼写让它更符合波兰语常用表达，如果你有特定需求可以直接修改：

{
  "download": "Ściągnij {{ msg | translate }}",
  "file": {
    "pdf": "plik pdf",
    "pic": "obrazki"
  }
}

3. 确保AngularJS翻译模块正确初始化 #

你需要先引入pascalprecht.translate模块，然后在配置里加载语言文件，示例代码如下：

angular.module('yourApp', ['pascalprecht.translate'])
  .config(['$translateProvider', function($translateProvider) {
    // 加载英文翻译
    $translateProvider.translations('en', {
      "download": "Download {{ msg | translate }}",
      "file": {
        "pdf": "pdf file",
        "pic": "pictures"
      }
    });
    // 加载波兰语翻译
    $translateProvider.translations('pl', {
      "download": "Ściągnij {{ msg | translate }}",
      "file": {
        "pdf": "plik pdf",
        "pic": "obrazki"
      }
    });
    // 设置默认显示英文
    $translateProvider.preferredLanguage('en');
    // 启用插值支持，让嵌套的翻译表达式生效
    $translateProvider.useInterpolation('$translateMessageFormatInterpolation');
  }]);

4. 核心逻辑说明 #

这里的关键是嵌套翻译：当渲染download这个翻译项时，里面的{{ msg | translate }}会把translate-values传递过来的msg值（比如file.pdf）当作新的翻译key，去语言文件里查找对应的文本，这样就实现了动态替换，最终显示出你想要的“Download pdf file”“Download pictures”（英文）和“Ściągnij plik pdf”“Ściągnij obrazki”（波兰语）的效果。

内容的提问来源于stack exchange，提问作者sara