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

Question

我是Angular应用程序中angular-translate的新手。

要求：

我必须在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's localStorage: Unknown provider: $translateLocalStorageProvider

任何直接的帮助都会非常值得注意。感谢

Answer 1

以下是带角度翻译的存储空间documentation

阅读后你会很快意识到， 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>

Answer 2

在我的应用中，我也发表评论$translateProvider.useLocalStorage(); 但我添加了

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

我有不同的json文件，每个lang一个，并且有func

$translate.use('fr') 

我改变了ui语言 每次用户更改lang时我都会将其保存在本地存储中，并在$ translate.use

内的startUp上使用它

Answer 3

您好尝试将这两个js文件包含在索引页

中

• angular-translate-storage-local.js
• 角平移存储-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>