6

我正在使用 l20n.js 向 Angular.js 应用程序添加本地化。这是我的项目结构：

/index.html

<!DOCTYPE html>
<html lang="en-US">
<head>
  <script src="jquery-1.11.1.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js">    </script>
  <script src="trackingController.js"></script>
  <script src="l20n.js"></script>
  <link rel="localization" href="locales/manifest.json">
</head>
<body>
  <h2 data-l10n-id="name"></h2>
  <p data-l10n-id="instructions"></p>
</body>
</html>

/locales/manifest.json

{
  "locales": [ "en-US", "fr-FR"],
  "default_locale": "en-US",
  "resources": [
    "{{locale}}/strings.l20n",
  ]
}

/locales/en-US/strings.l20n

<name "Search by name - EN">
<instructions "Enter one or more names - EN">

/locales/fr-FR/strings.l20n

<name "Search by name - FR">
<instructions "Enter one or more names - FR">

如何将英语（即/locales/en/strings.l20n文件）换成法语？尽管lang="fr-FR"在index.html.

4

2 回答 2

6

默认情况下，L20n 使用浏览器的语言设置来确定向用户显示的区域设置。我猜您的浏览器在某处的语言设置中有“en”或“en-US”。您可以通过打开开发者控制台（在 Firefox 中为 Ctrl+Shift+K，在 Chrome 中为 Ctrl+Shift+J）并输入navigator.languageor（在较新版本的 Firefox 中）来预览您的设置navigator.languages。

在 Firefox 中，您可以通过进入about:preferences#content并单击“语言”下的“选择”来更改您的语言首选项。在 Chrome 中，设置中有一个类似的面板，但它实际上并没有修改navigator.language属性，这是一个已知的错误。如果您想以这种方式进行测试，您需要下载并安装法语版 Chrome。

另一种方法是使用 L20n API 并通过以下方式显式更改语言：

document.l10n.requestLanguages(['fr']);

如果您想提供一段 UI 让您的用户更改应用程序的语言，这将非常有用。For instance, you could have a drop-down menu with all languages that you support, which calls document.l10n.requestLanguageswhen a new option is selected.

于 2014-07-10T01:14:50.677 回答
3

使用 L20n JavaScript API requestLocales()

/index.html

<!DOCTYPE html>
<html lang="en-US">
<head>
  <script src="jquery-1.11.1.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js">    </script>
  <script src="trackingController.js"></script>
  <script src="l20n.js"></script>
  <link rel="localization" href="locales/manifest.json">
  <script type="text/javascript">
    $('#langSwitch-en').click(function() {
      document.l10n.requestLocales('en-US');
    });
    $('#langSwitch-fr').click(function() {
      document.l10n.requestLocales('fr-FR');
    });
  </script>
</head>
<body>
<!-- fix the correct language code [-de] for [-fr] -->
  <a id="langSwitch-en" href="#">en</a> / <a id="langSwitch-fr" href="#">fr</a>
  <h2 data-l10n-id="name"></h2>
  <p data-l10n-id="instructions"></p>
</body>
</html>
于 2015-02-15T23:17:00.280 回答