angularjs – 如何使用translation-cloak修复Angular-translate

发布时间：2020-12-17 17:24:36 所属栏目：安全来源：网络整理

导读：我在第一次加载时出现文本闪烁的问题. 我尝试了我在互联网上找到的所有解决方案,但没有一个能够工作…… 我的angular-translate版本是最新的2.4.2. 这是HTML示例： !DOCTYPE htmlhtml ng-app="testapp"head title translate-cloak{{ 'page.appName' | transl

我在第一次加载时出现文本闪烁的问题.

我尝试了我在互联网上找到的所有解决方案,但没有一个能够工作……

我的angular-translate版本是最新的2.4.2.

这是HTML示例：

<!DOCTYPE html>
<html ng-app="testapp">
<head>
    <title translate-cloak>{{ 'page.appName' | translate }}</title>
    <base href="/">
    <meta charset="utf-8">
    <link rel="icon" type="image/ico" href="static/favicon.ico"/>
    <link rel="stylesheet" href="stylesheets/style.css"/>
</head>
<body>
<div>
    <ul>
        <li>
            <div>
                <a href="/"><strong translate-cloak>{{ 'page.appName' | translate }}</strong></a>
            </div>
        </li>
    </ul>
</div>
<div ng-view></div>
<script src="javascripts/angular.js"></script>
<script src="javascripts/angular-translate.js"></script>
<script src="javascripts/angular-translate-loader-url.js"></script>
<script src="javascripts/angular-translate-loader-static-files.js"></script>
<script src="javascripts/angular-translate-storage-local.js"></script>
<script src="javascripts/test.js"></script>
</body>
</html>

这是JavaScript：

angular.module('testapp',['ngRoute','ngResource','ngCookies','ngTable','mgcrea.ngStrap','pascalprecht.translate'])
        .config(['$locationProvider','$routeProvider','$httpProvider','$translateProvider',function ($locationProvider,$routeProvider,$httpProvider,$translateProvider) {
                $locationProvider.html5Mode(true);
                $routeProvider.when('/',{
                    templateUrl: 'views/main.html'
                }).otherwise({
                    redirectTo: '/'
                });
$translateProvider.useSanitizeValueStrategy('escaped').useLocalStorage().useStaticFilesLoader({
                    prefix: 'static/languages/',suffix: '.json'
                }).use('en-EN');
            }
        ]);

解决方法

您需要在$translateProvider配置中提供翻译并将其定义为首选语言.

The documentation call this FOUC(未翻译内容的Flash).

我也试验过,当我在translate-cloak中添加一个值时,比如translate-cloak =“any”,.translate-cloak类被添加到标签中,但是当我只放入translate-cloak时,.translate-cloak isn’补充说.

请记住,您需要设置.translate-cloak类的样式.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!