在 Polymer 应用程序中动态更改本地化

Question

我有一个包含许多模板的 Polymer 应用程序，我想在其中管理本地化。我为此使用 app-localize-behavior。我找到了。那里提出的解决方案使用行为，并且需要在每个模板中添加很少的内容，具有独特的 json 数据文件。

我的问题是我希望能够动态更改语言，并可能将其存储在我从另一个文件管理的 app-localstorage-document 元素中。我如何从该文件外部设置该语言属性？

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/app-localize-behavior/app-localize-behavior.html">

<script>
  MyLocalizeImpl = {
    properties: {
      language: {
        value: 'fr'
      }
    },

    attached: function() {
      this.loadResources(this.resolveUrl('../locales.json'));
    },
  };

  MyLocalize = [MyLocalizeImpl, Polymer.AppLocalizeBehavior]; 
</script>

Answer 1

好的，我改编了app-localize-behavior demo code。更改语言的模板必须覆盖语言属性，包括“notify: true”:

  properties: {
    language: {
      value: 'en',
      type: String,
      notify: true
    },
  },

然后我用这个绑定所有其他元素的语言属性：

<element language="{{language}}"></element>

使用本地化的模板当然必须 link 本地化脚本：

<link rel="import" href="localize.html">

... 并在脚本部分添加行为：

Polymer({
  is: "my-page",

  behaviors: [
    MyLocalize
  ]

奖励：如何为每种语言使用不同的 json 文件：https://abendigo.github.io/2016/08/03/lazyloading_localization.html

在 Polymer 应用程序中动态更改本地化

Dynamically change localization in Polymer app

polymer

polymer-1.0