使用 translatePartialLoader 时如何解决角平移 FOUC 问题？

Question

我在使用 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 文件中删除所有文本吗？

提前致谢。

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();
    });
});