logo标签列表

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

javascriptjsonangularjs
23
Angular-translate结合partial-loader只显示键，而不是实际翻译。我已经尝试了所有方法，但似乎找不到错误。没有任何错误被记录。
这是我的代码：
app.js
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');

});
从 /languages/{lang}/{part}.json 加载模板。
HomeCtrl.js
angular.module('HomeCtrl', []).controller('HomeController', 
  function($scope, $translate, $translatePartialLoader) {

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

});

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

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

home.json

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

home.html

{{ "HOMETITLE" || translate }}

最后，我按照以下顺序在index.html中链接了所有内容：

<script src="../libs/angular/angular.js"></script>
<script src="../libs/angular-route/angular-route.js"></script>
<script src="../libs/angular-resource/angular-resource.js"></script>
<script src="../libs/angular-translate/angular-translate.js"></script>
<script src="../libs/angular-translate-loader-partial/angular-translate-loader-partial.js"></script>

<script src="../js/controllers/HomeCtrl.js"></script>
<script src="../js/appRoutes.js"></script>
<script src="../js/index.js"></script>

所以，重新阐述我的问题：只显示了HOMETITLE而没有正确的翻译。非常感谢任何帮助！

能否将这个问题隔离在 Plunkr 中？我认为这可以帮助确定问题所在。 - Braulio
3个回答
14

如angular-translate文档所述，在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>

谢谢，格式错误是我的疏忽。现在的问题是由于竞态条件（请参见James的另一个答案），它不能处理JSON文件，你知道我怎么能解决这个问题吗？ - Andre
6

根据我使用angular translate的经验，这里可能会出现几个不同的问题，但很难确定因为您的环境也会对此产生影响。如果您有一个GitHub存储库，我可以克隆它以确保。

  1. 你的翻译格式有问题，就像其他人所说的那样，{{ "HOMETITLE" | translate }}。你可以在这里查看其他可能的翻译格式。我曾经遇到过使用部分和外部文件加载的过滤器翻译时出现问题，如果你要使用部分加载，则强烈建议你只使用属性来设置你的翻译，例如

    http://angular-translate.github.io/docs/#/guide/05_using-translate-directive

  2. 你的部分文件加载器遇到了竞争条件，并且在你实际获得翻译之前解析了{{ "HOMETITLE" | translate }}。由于你可以在部分加载中使用默认翻译，我建议在你的翻译提供者配置中放置一个默认翻译，以确保不是这种情况。一些其他用户所描述的简单内容，如下所示：

    $translateProvider.translations('nl', {
  "HOMETITLE" : "Geweldige Whatsapp gesprekken.",
});

$translateProvider.preferredLanguage('nl');
$translateProvider.forceAsyncReload(true);
将translateProvider.forceAsyncReload(true);添加到配置的末尾将强制刷新。但是我建议您将翻译与json文件略有不同，以便在添加强制重新加载之前查看是否存在这种情况。
谢谢James！我确实有一个格式错误。当我解决了这个问题后，由于竞态条件（我已经验证过），它仍然无法正常工作。我该如何跟踪/预防/解决这个问题？再次感谢！ - Andre
我在从另一个文件加载部分翻译时，已经遇到了多次这种情况。在 angular-translate 的待办事项中有几个与此相关的问题。我能说的最好的方法是将初始文件调用包装在一个 promise 中，等到该 promise 解决后，再调用 translate provider，因为 provider 不会等到前一个 promise 解决。如果我有几分钟的时间，我会模拟一些示例代码。 - James
你可以始终在语言设置下方，在调用的末尾添加以下行。例如： $translateProvider.preferredLanguage('nl'); $translateProvider.forceAsyncReload(true); - James
如果您熟悉Promise或愿意制作自定义加载器http://angular-translate.github.io/docs/#/guide/13_custom-loaders，您可以在其中创建一个Promise，然后加载其他内容。我过去所做的是创建了一个加载屏幕Promise链，在默认情况下等待翻译加载完成，或者在显示页面加载之前已经超时2000毫秒。这是因为我必须支持希伯来语和阿拉伯语，并且在知道要加载的语言之前必须将页面布局翻转，否则页面布局会看起来很奇怪。 - James
1
问题是由JavaScript语言结构和AngularJS模板字符串interpolate表达式混淆引起的。
考虑以下JavaScript表达式：
var foo = bar || baz;

根据 bar 的值，表达式 bar || baz 将返回bar或baz。当bar是真值时，它将被返回；否则（当bar是假值时），将返回baz。
给定以下AngularJS插值表达式：{{ "HOMETITLE" || translate }}，该表达式评估为"HOMETITLE"的值，因为该字符串文字是真值。
然而，应将translate 过滤器与您的HTML模板绑定，如下所示：{{ "HOMETITLE" | translate }}。 因此，translate过滤器将传递参数'HOMETITLE'作为密钥，并返回所需文本。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接