在使用translatePartialLoader时如何解决角平移FOUC问题? [英] How to fix angular-translate FOUC issues while using translatePartialLoader?
问题描述
我在使用angular-translate时一直遇到FOUC(未翻译内容的闪烁)问题.这是我的设置:
I've been experiencing FOUC (flash of untranslated content) issues while using angular-translate. This is my setup:
.config(function ($translateProvider, defaultI18n) {
$translateProvider
.useSanitizeValueStrategy('sanitize')
.translations('en-GB', defaultI18n.en)
.useCookieStorage()
.useLoader('$translatePartialLoader', {
urlTemplate: '/{part}/{lang}.json'
})
.preferredLanguage('en-GB')
.fallbackLanguage('en-GB');
})
.run(function ($rootScope, $translate) {
$rootScope.$on('$translatePartialLoaderStructureChanged', function () {
$translate.refresh();
});
由于我在每个控制器视图中都使用 $ translatePartialLoader
,所以我拥有:
Since I'm using $translatePartialLoader
in each controller view I have:
.controller('SomeController', function ($translatePartialLoader) {
$translatePartialLoader.addPart('path-to-some-view-i18n');
})
如果我删除了 $ translate.refresh()
,FOUC将消失,但是文本不会使用新的语言环境进行更新.不知道我的HTML文件中是否包含文本,可能会引起冲突.
If I remove $translate.refresh()
FOUC goes away, but the text isn't updated with the new locale. Not sure if having text in my HTML files maybe causing a conflict here.
如何完全删除FOUC,但仍保持应用正确翻译?
我应该从HTML文件中删除所有文本吗?
谢谢.
推荐答案
我稍微改变了逻辑,FOUC问题似乎消失了.我没有在每个控制器中执行 $ translatePartialLoader.addPart('path-to-some-view-i18n');
,而是为每个状态定义了相应的i18n路由,如下所示:
I changed the logic a bit and the FOUC issues seem to disappear. Instead of executing $translatePartialLoader.addPart('path-to-some-view-i18n');
in each controller, I defined for each state the respective i18n route(s) like this:
.state('state1', {
url: '/state1',
templateUrl: 'path-to-some-view',
data: {
i18n: ['path-to-some-view-i18n']
}
})
然后,当触发事件 $ stateChangeStart
时:
.run(function ($rootScope, $translate, $translatePartialLoader) {
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
if(toState.data.i18n) {
angular.forEach(toState.data.i18n, function (value) {
$translatePartialLoader.addPart(value);
});
}
});
$rootScope.$on('$translatePartialLoaderStructureChanged', function () {
$translate.refresh();
});
});
这篇关于在使用translatePartialLoader时如何解决角平移FOUC问题?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!