Angularjs 如何在使用角度翻译时将所选语言保留在本地存储中？

在我的Angular应用程序中，我是新手

要求：

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

我必须在

AngularJS

中创建一个多语言应用程序，用户可以在其中设置语言。因此，为此，我必须从文件中加载翻译，并将首选语言保存在

localStorage

中。 因此，如果用户再次访问应用程序，他将以先前设置的语言显示

到目前为止我所做的：

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

使用

$translateProvider.useStaticFileLoader

代码：

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

如果我评论这行，应用程序运行良好：

// $translateProvider.useLocalStorage();

但是如果我使用它，我会在控制台上看到这个错误：

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

我还在我的

index.html

中包含了

angular translate storage local.min.js

文件，但没有成功

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

---

任何直接的帮助都是非常值得的。谢谢

在我的应用程序中，我还评论了

$translateProvider.useLocalStorage（）
但我补充说

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

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

$translate.use('fr') 

我更改ui语言
每次用户更改语言时，我都会将其保存在本地存储中，并在启动时在$translate.use中使用它。请尝试将这两个js文件包含到索引页中


angular-translate-storage-local.js
angular-translate-storage-cookie.js

或者（如果您使用Bower）


这是带角度平移的存储

阅读后您很快就会意识到，角度转换存储本地库将与角度转换存储cookie库一起使用。由于一些较旧的浏览器（例如：IE 7或更低版本）不支持本地存储，因此，当本地存储不起作用时，我们希望有一个回退选项来使用cookie

该错误是由于角度转换存储本地尝试注入其回退选项角度转换存储cookie引起的

要避免此问题，您需要安装angular translate local cookie

请注意，angular translate local cookie试图注入ngCookie，这是一个库，您必须安装该库，并为应用程序设置依赖项注入。注射应该是

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

<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>

此外，index.html中包含文件的顺序错误也会给您带来问题。正确的顺序应该是

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

<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>


可能的副本还包括：我认为这可能会对您有所帮助。我同意你的看法。但我的问题不同，我想把用户语言保存在本地存储器中。因此，如果用户再次使用应用程序，则无需再次选择语言。“$translateProvider.preferredLanguage（'en'）”设置默认语言，“$translateProvider.preferredLanguage（'en'）”设置默认语言，您可以构建一个启动函数，该函数将检查本地存储中是否有保存的lang值，并将使用“$translate.use（window.localStorage.getItem（'CLIENT_lang'）”）应用它，当用户决定更改您将构建的ui lang时，将在另一个函数中应用它：“changeLang（langKey）{$translate.use（“+langKey”）；window.localStorage.setItem（'CLIENT_LANG'，langKey）；}