Question

Angular-translate与partial-loader结合使用只显示键而不是实际翻译。我已经尝试了一切，但似乎无法找到错误。没有记录错误。

这是我的代码：

app.js

SomeProperty

所以模板是从/ languages / {lang} / {part} .json

加载的

HomeCtrl.js

var f = new Foo();
Console.WriteLine(f.SomeProperty);   // displays "foobar"
                                     // assuming we'd marked it public
f.someField = "la";                  // assuming we'd made that public  too!
Console.WriteLine(f.SomeProperty);   // displays "labar"

在Express中我有这个路径来确保实际返回文件而不是路由到Angular：

var app = angular.module('myapp', [
  'ngRoute',
  'appRoutes', 
  'pascalprecht.translate',
  'angularTranslate',
  'HomeCtrl'
]); 

angular.module('angularTranslate', ['pascalprecht.translate'])
  .config(function($translateProvider, $translatePartialLoaderProvider ) {
    $translateProvider.useLoader('$translatePartialLoader', {
      urlTemplate: '/languages/{lang}/{part}.json'
    });

  $translateProvider.preferredLanguage('nl');

});

home.json

angular.module('HomeCtrl', []).controller('HomeController', 
  function($scope, $translate, $translatePartialLoader) {

    $translatePartialLoader.addPart('home');
    $translate.refresh();

});

home.html的

app.get('/languages/:lang/:part', function(req, res) {
 res.sendFile(req.params.lang + '/' + req.params.part, { root: '././languages' });
});

最后我使用此顺序链接了index.html中的所有内容：

{
    "HOMETITLE" : "Geweldige Whatsapp gesprekken.",
}

所以要重申我的问题：只显示HOMETITLE而不是正确的翻译。非常感谢任何帮助！

Answer 1

正如angular-translate documentation中所述，您应该在html文件中将||替换为|：

{{ "HOMETITLE" | translate }}

此后是包含json翻译的独立片段：

var app = angular.module('myapp', [
  'pascalprecht.translate',
  'angularTranslate',
]); 

angular.module('angularTranslate', ['pascalprecht.translate'])
  .config(function($translateProvider, $translatePartialLoaderProvider ) {
    $translateProvider.translations('nl', {
      "HOMETITLE" : "Geweldige Whatsapp gesprekken.",
    });
    $translateProvider.preferredLanguage('nl');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.7.2/angular-translate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-loader-partial/2.7.2/angular-translate-loader-partial.min.js"></script>
<html ng-app="myapp">
<body>
{{ "HOMETITLE" | translate }}
</body>
</html>

Answer 2

根据我对角度翻译的经验，这里可能会发生一些不同的问题很难确定，因为你的环境会影响到这个因素，如果你有一个我可以克隆的github回购我可以肯定。

您的翻译中只有格式问题，就像其他人所说的那样，{{“HOMETITLE”|您可以在此处查看格式化翻译的其他可能方式。我使用带有部分和外部文件加载的过滤器转换遇到了问题，我强烈建议您使用部分加载然后只使用属性来设置翻译，例如

http://angular-translate.github.io/docs/#/guide/05_using-translate-directive
你的部分文件加载器遇到竞争状态，它正在解析{{“HOMETITLE”|在你真正得到翻译之前翻译}}。由于您可以使用部分加载的默认翻译，我建议您在翻译提供程序配置中输入默认翻译，以确保不是这种情况。像一些其他用户所描述的那样简单
```
$translateProvider.translations('nl', {
  "HOMETITLE" : "Geweldige Whatsapp gesprekken.",
});

$translateProvider.preferredLanguage('nl');
$translateProvider.forceAsyncReload(true);
```

添加translateProvider.forceAsyncReload（true）;在配置结束时将强制刷新。但是我建议您使翻译与json文件略有不同，这样您就可以在添加强制重新加载之前查看是否属于这种情况。

Answer 3

问题是由于JavaScript语言构造与AngularJS模板字符串interpolate表达式混合造成的。

考虑以下JavaScript表达式：

var foo = bar || baz;

根据bar的值，表达式bar || baz将返回 bar或baz。如果bar truthy ，则会返回;否则（当它 falsy ）baz将被退回。

给定以下AngularJS插值表达式：{{ "HOMETITLE" || translate }}，表达式求值为"HOMETITLE"，因为该字符串文字是真实的。

但是，translate filter 应绑定到您的HTML模板，如下所示{{ "HOMETITLE" | translate }}。因此，translate过滤器将作为参数传递键＆＃39; HOMETITLE＆＃39; ，并且应该返回所需的文本。

如何使用Angular-Translate显示翻译？

3 个答案: