Question

我试图将翻译部分加载集成到我的应用中，但是初始加载翻译文件时会出现闪烁（更改状态时）。我按照建议使用translate-cloak，但我仍然可以获得相同的效果。

注意闪烁仅在更改部分而非语言时发生。

这是我的设置

配置

app.config(['$translateProvider', function($translateProvider){
  $translateProvider.useLoader('$translatePartialLoader', {
    urlTemplate: 'dist/locales/{lang}/{part}.json'
  });
  $translateProvider.preferredLanguage('en-US');
}])

控制器

app.controller('appCtrl', function($translate, $translatePartialLoader){
  $translatePartialLoader.addPart('app');
  $translate.refresh()
});

模板

<div translate="HEADLINE"></div>

布局

<html ng-app="app" >
  <head>
    <title>SportProphecy</title>
    <script src="/dist/js/vendors.min.js"></script>
    <script src="/dist/js/app.min.js"></script>
  </head>
  <body ui-view ng-cloak translate-cloak>
  </body>
</html>

我错过了什么吗？我已阅读有关translate-cloak的所有文档。

PS：我尝试创建一个小提琴但由于某些原因json文件没有被请求。

Answer 1

这被称为角度翻译文档中的“未翻译内容的Flash”。您可能需要查看here。

基本上，您需要定义至少一种同步加载的语言。因此，请继续在app.config

中添加首选语言的翻译（在您的案例中为“en”）

app.config(['$translateProvider', function($translateProvider){
  $translateProvider.useLoader('$translatePartialLoader', {
    urlTemplate: 'dist/locales/{lang}/{part}.json'
  });

  $translateProvider.preferredLanguage('en-US');

  $translateProvider.translations('en-US', {
    'HEADLINE': 'My Fancy App!'
  });
}])

Answer 2

svikasg 完全正确。虽然作为一个工作场所，您可以在控制器内执行以下操作：

$translatePartialLoader.addPart('my-part'); //this should be already in your controller

var vm = this;
function updateCloak () {
    vm.cloak = $translate.instant('some_translation_id') === 'some_translation_id';
}   
$rootScope.$on('$translateLoadingEnd', function () {
   $timeout(updateCloak);
});
updateCloak();

然后在您正在使用翻译的页面容器中添加ng-if="ctrl.cloak"。如果您愿意，也可以使用ng-class。

当然，您还需要在控制器中注入$rootScope, $translate, $timeout。

只要预期的翻译不可用，此代码就会将cloak范围属性设置为true，允许您使用与您正在检查的文件相同的文件中的翻译来隐藏部件。

注意：如果您没有使用controllerAs语法，请用范围替换所有vm引用，并从ctrl.中删除ng-if。

translate-cloak不使用部分加载器

2 个答案: