聚合物的本地化？

Posted 2021-04-20

我打算用Polymer创建一个webapp。对于该webapp，我需要本地化。是否有聚合物方式进行本地化？有没有人在Polymer webapp中做过本地化？

答案

I18n和l10n也在我的待办事项清单上。目前我正在将一个应用程序从AngularJS移植到Polymer。后端是Ruby on Rails。我使用i18n-js gem将Rails转换文件（en.yml，de.yml等）转换为一个包含带有所有翻译的I18n对象的大型javascript文件。此gem还提供用于执行文本转换和值本地化的JavaScript库。但是还有其他JavaScript库提供了类似的功能。

当前语言环境是根据HTTP请求的响应设置的，返回用户Accept-Language标头。

到目前为止，没有什么聚合物具体。

然后，我创建了一组全局Polymer表达式过滤器，在其输入字符串上执行各种语言环境转换。这与我学习在AngularJS应用程序中使用的方法相同。翻译过滤器如下所示（I18n.t是JavaScript库的翻译功能）

PolymerExpressions.prototype.i18n = function(key) {
  return I18n.t(key);
};

并且像这样使用

<paper-button label="{{ 'action.help' | i18n }}"></paper-button>

日期本地化可以写为

{{ someDate | i18n_date('short') }}

我将i18n过滤器和其他辅助函数打包到Polymer元素中，因此我也可以将此元素包含在另一个元素中，并使用其JavaScript代码中的转换函数。

i18n元素也包含在我的主app元素中，它初始化I18n库并设置默认和当前语言环境。

另一答案

使用Polymer.AppLocalizeBehavior

https://github.com/PolymerElements/app-localize-behavior

我在PWA模板中使用此行为为每个自定义元素的语言环境。

https://github.com/StartPolymer/progressive-web-app-template

另一答案

我没有意识到使用i18n的Polymer方式，我建议做那个服务器端。

如果框架是Spring，我会将自定义元素实现为jsp，并像往常一样使用<spring:message />标记处理i18n。

唯一需要注意的是，切换应用程序的语言需要完全重新加载。但由于语言切换通常不常做，我不认为这是一个问题。

另一答案

对于Polymer 1.0，我刚刚发布了一个简单的（大量开发）元素（在gitlab上看到它或者读一下here）。它异步加载转换文件，使用非常简单：

<!-- Import it in head -->
<link rel="import" href="bower_components/quaintous-i18n/quaintous-i18n.html">
<!-- initialize it in body -->
<quaintous-i18n locales-path="/locales/fa.json"></quaintous-i18n>

现在您可以通过各种方式使用它：

• 在计算属性中：只需添加I18N作为元素behavior并翻译您的数据绑定，例如{{__('hello')}}
• 在全球范围内，只需使用I18N对象，例如I18N.__('hello')

另一答案

我实现了一种不同的方式，即使有AppLocalizeBehavior似乎做得很好。我创建了一个locale.json文件，其中包含语言列表，需要数据的页面名称以及要显示的数据。

{
"en": {
"loginPage"       : {
  "login"           : "Log in",
  "loginUserid"     : "Enter user id",
  "loginPassword"   : "Enter password"
},
},
"nl": {
"loginPage"       : {
  "login"           : "Log in",
  "loginUserid"     : "Voer gebruikers-ID in",
  "loginPassword"   : "Voer wachtwoord in"
},
},
}

我创建了一个翻译组件，负责在本地存储中设置语言（虽然它需要一些重构，我可以使用navigator对象来获取语言）以及从locale.json获取数据。这看起来像这样：

class Translate extends 
Polymer.mixinBehaviors([Polymer.AppLocalizeBehavior], Polymer.Element) {
        static get is() { return 'translate'; }


        static get properties() {
            return {
                language: {
                    type: String,
                    value: 'nl',
                    notify: true
                },
                resources: {
                    type: Object,
                    notify: true
                }
            }
        }

        ready() {
            super.ready();
            if (localStorage.length) {
                if (localStorage.getItem('language')) {
                    this.language = localStorage.getItem('language');
                }
                else {
                    localStorage.setItem('language', this.language);
                }
            } else {
                localStorage.setItem('language', this.language);
            }

        }

        attached() {
            this.loadResources(this.resolveUrl('locales.json'));
        }

    }

    window.customElements.define(Translate.is, Translate);

现在，您可以在应用程序的根或应用程序shell中使用此自定义元素

<translate 
class="translate" 
language="{{language}}" 
resources="{{resources}}">
</translate>

将观察者放在您的资源属性上并从您的locale.json获取数据。现在基于不同的页面仅传递该页面所需的翻译值。 page-values是翻译字符串的值，如下所示：

<login-form 
        title='Login' 
        name="login" 
        page-values="[[pageValues.loginPage]]" 
        login-success="[[_loginSuccess]]"
        api={{apiCollection.login}}></login-form>

希望这可以帮助。

另一答案

我自己创建了一个实现。看看我做了什么并不难做到。