使用 Angular 翻译时如何在 LocalStorage 中保留所选语言？答案

【问题标题】：How to persist selected language in LocalStorage while using Angular-translate?使用 Angular 翻译时如何在 LocalStorage 中保留所选语言？
【发布时间】：2017-01-14 21:06:33
【问题描述】：

我是 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 中看到了这些问题，但它们无济于事： Angular-translate's localStorage: Unknown provider: $translateLocalStorageProvider

任何直接的帮助都将是非常可观的。谢谢

【问题讨论】：

Angular-translate's localStorage: Unknown provider: $translateLocalStorageProvider的可能重复
还包括这个：github.com/angular-translate/…
我认为这可能会对您有所帮助。 stackoverflow.com/questions/22364503/…

标签： angularjs angular-translate angular-local-storage

【解决方案1】：

这是 documentation 在存储上的角度转换

阅读后您很快就会意识到 angular-translate-storage-local 库是要与 angular-translate-storage-cookie 一起使用的强>库。由于某些较旧的浏览器不支持本地存储（例如：IE 7 或更低版本），因此当本地存储无法解决问题时，angular translate 希望有一个备用选项来使用 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>

【讨论】：

【解决方案2】：

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

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

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

$translate.use('fr')

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

【讨论】：

我同意你的看法。但我的问题不同。我想将用户语言保存在本地存储中。这样，如果用户再次使用该应用程序，则无需再次选择语言。
'$translateProvider.preferredLanguage('en')' 设置默认语言，
'$translateProvider.preferredLanguage('en')' 设置默认语言，您可以构建一个启动函数，该函数将检查 localStorage 中是否有保存的语言值并将其应用：' $translate.use(window.localStorage.getItem('CLIENT_LANG'))' 以及当用户决定更改您将构建的 ui 语言时的另一个函数：'changeLang(langKey){ $translate.use("" + langKey ); window.localStorage.setItem('CLIENT_LANG',langKey); }'

【解决方案3】：

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

angular-translate-storage-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>

【讨论】：