如何在使用Angular-translate时在LocalStorage中保留所选语言？

Question

我是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中看到了这些问题,但它们没有帮助: Angular-translate的localStorage:未知的提供者:$ translateLocalStorageProvider

任何直接的帮助都将非常值得注意.谢谢

Answer 1

这是关于存储角度转换的文档

在阅读之后你很快就会意识到,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>