Question

在使用角度翻译时，我一直在体验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文件中删除所有文字吗？

提前致谢。

Answer 1

我改变了逻辑，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();
    });
});

如何在使用translatePartialLoader时修复角度翻译FOUC问题？

1 个答案: