如何在使用 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();

但是如果我使用它，我会在控制台上收到此错误：

我也在 index.html 中包含了 angular-translate-storage-local.min.js 文件。但是没有成功。

我也在 SO 中看到了这些问题，但它们没有帮助：

我们将不胜感激任何直接的帮助。谢谢

Answer 1

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

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

我有不同的 json 个文件，每个语言一个，并且带有 func

$translate.use('fr')

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

中的启动时使用它

Answer 2

你好尝试将这两个js文件包含到你的index页面中

angular-翻译存储-local.js
angular-翻译存储-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>

Answer 3

这是 documentation 存储 angular 翻译

阅读后您很快就会意识到 angular-translate-storage-local 库是要与 angular-translate-storage-cookie 库。由于某些较旧的浏览器（例如：IE 7 或更低版本）不支持本地存储，angular translate 希望在本地存储无法解决问题时使用 cookie 的回退选项。

错误是由于 angular-translate-storage-local 试图注入其回退选项 angular-translate -存储 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>

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

How to persist selected language in LocalStorage while using Angular-translate?

angularjs

angular-translate

angular-local-storage