/index.html

Question

我正在使用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，它仍会呈现en-US。

Answer 1

默认情况下，L20n使用浏览器的语言设置来确定要向用户显示的区域设置。我猜测你的浏览器已经有了＆＃39; en＆＃39;或者＆＃39; en-US＆＃39;在语言设置的某个地方。您可以通过打开开发人员控制台（Firefox中的Ctrl + Shift + K，Chrome中的Ctrl + Shift + J）并键入navigator.language或（在较新版本的Firefox中）navigator.languages来预览您的设置。

在Firefox中，您可以通过about:preferences#content，然后点击“选择”来更改语言偏好设置。在＆＃39;语言＆＃39;。在Chrome中，“设置”中有一个类似的面板，但它实际上并没有修改navigator.language属性，即known bug。如果您想以这种方式进行测试，则需要下载并安装法语版的Chrome。

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

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

如果您想提供一个用户界面来让用户更改应用语言，这非常有用。例如，您可以使用包含所有语言的下拉菜单，在选择新选项时调用document.l10n.requestLanguages。

Answer 2

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

如何使用l20n.js指示在浏览器中呈现哪种语言？

/index.html

/locales/manifest.json

/locales/en-US/strings.l20n

/locales/fr-FR/strings.l20n

2 个答案:

/index.html