WedX - журнал о программировании и компьютерных науках

Как исправить проблемы с угловым переводом FOUC при использовании translatePartialLoader?

У меня возникли проблемы с FOUC (вспышка непереведенного контента) при использовании angular-translate. Это моя установка:

.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?

Заранее спасибо.

javascript angularjs angular-translate
20.08.2015

Ответы:


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();
    });
});
24.08.2015
  • Можете ли вы предложить стратегию использования этого подхода с состояниями, которые автоматически загружаются на домашнюю страницу? 27.10.2016
  • Также я столкнулся с проблемой при попытке загрузить данные в выпадающие списки, иногда это происходит медленно или никогда не заполняется без каких-либо ошибок. 27.10.2016
  • Возможно, директива translate-cloak может быть полезна в вашем случае. Для дальнейшего чтения: здесь и здесь. 08.11.2016
  • Также см. заголовок stackoverflow.com/questions/37247083/ для решения проблемы FOUC. 29.11.2016
    • Новые материалы
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
    ИИ в аэрокосмической отрасли
    Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..
    Для любых предложений по сайту: [email protected]