Как сохранить выбранный язык в LocalStorage при использовании Angular-translate?

Я новичок в angular-translate в своем приложении Angular.

Требование:

Мне нужно создать многоязычное приложение в AngularJS, где у пользователя есть возможность установить свой язык. Итак, для этого мне нужно загрузить переводы из файлов и сохранить нужный язык в localStorage. Так что, если пользователь снова придет для доступа к приложению, ему будет отображаться ранее установленный язык.

Что я уже сделал:

Загруженные переводы из файлов с помощью $translateProvider.useStaticFilesLoader

Код:

var app = angular.module("myLangApp", ['pascalprecht.translate'])
app.config(function($translateProvider) {
$translateProvider.useStaticFilesLoader({
        prefix: 'languages/',
        suffix: '.json'
      });
    $translateProvider.useLocalStorage();
});

Приложение работает нормально, если я прокомментирую эту строку:

// $translateProvider.useLocalStorage();

Но если я использую его, я получаю эту ошибку на консоли:

Ошибка консоли для приведенного выше кода.

Я также включил файл angular-translate-storage-local.min.js в свой index.html. Но безуспешно.

Я также видел эти вопросы в SO, но они не помогают: : Неизвестный провайдер: $translateLocalStorageProvider

Любая немедленная помощь будет весьма ценна. Спасибо


angularjs angular-translate angular-local-storage
person Rohit Jindal    schedule 06.10.2015    source источник
comment
Возможный дубликат localStorage Angular-translate: неизвестный поставщик: $translateLocalStorageProvider   -  person Aks    schedule 06.10.2015
comment
Также включите это: github.com/angular-translate/   -  person Aks    schedule 06.10.2015
comment
Думаю, это может вам помочь. stackoverflow.com/questions/22364503/   -  person Sourabh Agrawal    schedule 06.10.2015

Ответы (3)


arrow_upward
8
arrow_downward

Вот документация по хранилищу с угловым переводом

После прочтения вы вскоре поймете, что библиотека angular-translate-storage-local предназначена для использования вместе с библиотекой angular-translate-storage-cookie. . Поскольку локальное хранилище не поддерживается в некоторых старых браузерах (например, IE 7 или ниже), угловой перевод хочет иметь возможность использовать файлы cookie, когда локальное хранилище не поможет.

Ошибка вызвана тем, что angular-translate-storage-local пытается внедрить резервную опцию angular-translate-storage-cookie.

Чтобы обойти эту проблему, вам нужно установить angular-translate-local-cookie.

Остерегайтесь того, что angular-translate-local-cookie пытается внедрить ngCookie, библиотеку, которую вам нужно будет установить, а также установить внедрение зависимостей для вашего приложения. Инъекция должна быть

var app = angular.module('myApp', ['ngCookies', 'pascalprecht.translate']);

Кроме того, неправильный порядок включаемых файлов в вашем index.html также может вызвать проблемы. Правильный порядок должен быть

<script type="text/javascript" src="vendor/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="vendor/angular-translate-storage-cookie/angular-translate-storage-cookie.min.js"></script>
<script type="text/javascript" src="vendor/angular-translate-storage-local/angular-translate-storage-local.min.js"></script>
person Jun Duan    schedule 04.11.2015

arrow_upward
0
arrow_downward

в моем приложении я также комментирую $translateProvider.useLocalStorage();, но я добавил

$translateProvider.preferredLanguage('en');
$translateProvider.useStaticFilesLoader({
  prefix: 'languages/',
  suffix: '.json'
});

У меня есть разные файлы json, по одному для каждого языка, и с функцией func

$translate.use('fr')

Я меняю язык пользовательского интерфейса каждый раз, когда пользователь меняет язык. Я сохраняю его в локальном хранилище и использую при запуске внутри $translate.use.

person David    schedule 06.10.2015
comment
Я согласен. Но мой вопрос в другом. Я хочу сохранить язык пользователя в локальном хранилище. так что, если пользователь снова зайдет в приложение, нет необходимости снова выбирать язык. - person Rohit Jindal; 06.10.2015
comment
'$translateProvider.preferredLanguage('en')' устанавливает язык по умолчанию, - person David; 06.10.2015
comment
'$translateProvider.preferredLanguage('en')' устанавливает язык по умолчанию, вы можете создать функцию запуска, которая будет проверять, есть ли сохраненное значение языка в localStorage, и применит его, используя: '$translate.use(window.localStorage .getItem('CLIENT_LANG'))' и в другой функции, когда пользователь решит изменить язык пользовательского интерфейса, который вы создадите: 'changeLang(langKey){ $translate.use( + langKey); window.localStorage.setItem('CLIENT_LANG',langKey); }' - person David; 06.10.2015

arrow_upward
0
arrow_downward

Привет. Попробуйте включить эти два js-файла на свою индексную страницу.

  • угловой перевод-хранилище-local.js
  • angular-translate-storage-cookie.js

или (если вы используете Bower)

<script src="bower_components/angular-translate-storage-local/angular-translate-storage-local.js"></script>
<script src="bower_components/angular-translate-storage-cookie/angular-translate-storage-cookie.js"></script>
person CaptainNemo    schedule 20.10.2015