如何在使用Angular-translate時在LocalStorage中保留所選語言？

Question

我是Angular應用程序中的角度翻譯新手。

要求：

我必須在AngularJS中創建一個多語言應用程序，用戶可以選擇設置他的語言。 因此，為此，我必須從文件加載翻譯並在localStorage保存該首選語言。 因此，如果用戶再次訪問該應用程序，他將顯示先前設置的語言。

到目前為止我做了什么：

使用$translateProvider.useStaticFilesLoader從文件加載的$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的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>

Answer 2

在我的應用程序中我也評論$translateProvider.useLocalStorage(); 但我補充說

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

我有不同的json文件，每個lang一個，並帶有func

$translate.use('fr') 

每次用戶更改lang時我都會更改ui語言我將其保存在本地存儲中並在$ translate.use內的startUp上使用它

Answer 3

您好嘗試將這兩個js文件包含在索引頁中

• 角翻譯存儲-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>