如何使用 Polymer 构建多语言网站？

Question

我不想复制我的组件或使用模板应用程序。那我该怎么做呢？

Answer 1

您可以为 chrome 应用程序和扩展程序执行类似 chrome.i18n api 的操作。 https://developer.chrome.com/extensions/i18n 一般的想法是每种语言都有一个包含所有文本的 json 文件。按语言分类的子文件夹。

_locals
    \- en
     |  \- messages.json
     - es
         \- messages.json

json 文件的内容只需要有效 json。没有什么令人兴奋的只是键值对

messages.json

{
  elementName: 'my-element',
  elementVersion: '0.1'
}

元素的用户可以使用属性

设置语言

<my-element language="en"></my-element>

然后在您的元素中创建 XMLHttpRequest 以获取文本。

getLanguageText: function() {
  var xhr = new XMLHttpRequest();
  var url = '/my-element/_locals/' + this.language + '/messages.json';
  xhr.open("GET", url, true);
  xhr.responseType = 'json';
  xhr.send();
  xhr.onload = function (e) {
    this.text = e.target.response;
  }.bind(this);
  xhr.onerror = function (e) {
    console.error('Error Loading Language Text', e);
  };
};

我猜这种方法的真正问题是它依赖于 json 文件保持静态的路径。如果每个人都想从 say bower 获取元素，那么元素总是位于 bower_components/my-element/_locals/en/messages.json 位置，这没什么大不了的。

然后您可以像使用任何其他聚合物值一样使用 html 中的值。

{{text.elementName}}

也许这会有所帮助。 /耸肩

编辑：我没有看到 post 的这个@时间，但您可能需要将 this 绑定到 onload 回调。在原始答案中 this 将是 xhr 对象。通过使用 .bind(this) 回调将正确定位自定义元素。错误编辑答案。

如何使用 Polymer 构建多语言网站？

How to build a multilingual website with Polymer?

html

polymer

multilingual

web-component