如何在使用 translatePartialLoader 时修复 angular-translate FOUC 问题?
How to fix angular-translate FOUC issues while using translatePartialLoader?
我在使用 angular-translate 时遇到了 FOUC(未翻译内容闪现)问题。这是我的设置:
.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
我有:
.controller('SomeController', function ($translatePartialLoader) {
$translatePartialLoader.addPart('path-to-some-view-i18n');
})
如果我删除 $translate.refresh()
FOUC 消失,但文本不会更新为新的语言环境。不确定我的 HTML 文件中是否有文本可能会导致此处发生冲突。
我怎样才能完全删除 FOUC 但仍然保持应用程序正确翻译?
我应该从 HTML 文件中删除所有文本吗?
提前致谢。
我稍微改变了逻辑,FOUC 问题似乎消失了。我没有在每个控制器中执行 $translatePartialLoader.addPart('path-to-some-view-i18n');
,而是为每个状态定义了各自的 i18n 路由,如下所示:
.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();
});
});
我在使用 angular-translate 时遇到了 FOUC(未翻译内容闪现)问题。这是我的设置:
.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
我有:
.controller('SomeController', function ($translatePartialLoader) {
$translatePartialLoader.addPart('path-to-some-view-i18n');
})
如果我删除 $translate.refresh()
FOUC 消失,但文本不会更新为新的语言环境。不确定我的 HTML 文件中是否有文本可能会导致此处发生冲突。
我怎样才能完全删除 FOUC 但仍然保持应用程序正确翻译?
我应该从 HTML 文件中删除所有文本吗?
提前致谢。
我稍微改变了逻辑,FOUC 问题似乎消失了。我没有在每个控制器中执行 $translatePartialLoader.addPart('path-to-some-view-i18n');
,而是为每个状态定义了各自的 i18n 路由,如下所示:
.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();
});
});