如何在聚合元素加载页面之前初始化聚合元素的国际化 [英] How To Initialize Internationalization For A Polymer Element Before It Loads On Page
本文介绍了如何在聚合元素加载页面之前初始化聚合元素的国际化的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用Dart建立一个Polymer应用程式。由于我在Polymer元素中使用Dart的国际化功能，因此我想在创建Polymer元素之前初始化国际化消息，并在Polymer元素中显示给定语言环境的相应消息。
如何做到这一点？有没有人成功使用Polymer with Internationalization？
ps。我已遵循此示例来设置国际化
以下是Dart Editor默认生成的Polymer应用程序以及我添加的代码。 strong>
messages_en.dart $ b
library messages_en;
import'package：intl / intl.dart';
import'package：intl / message_lookup_by_library.dart';
final messages = new MessageLookup（）;
类MessageLookup扩展MessageLookupByLibrary {
get localeName => 'en';
final messages = {
myMsg：（）=> Intl.message（MY MESSAGE）
};
}
messages_all.dart
import'dart：async';
import'package：intl / message_lookup_by_library.dart';
import'package：intl / src / intl_helpers.dart';
import'package：intl / intl.dart';
import'messages_en.dart'as en;
MessageLookupByLibrary _findExact（localeName）{
switch（localeName）{
case'en'：return en.messages;
default：return null;
}
}
initializeMessages（localeName）{
initializeInternalMessageLookup（（）=> new CompositeMessageLookup（））;
messageLookup.addLocale（localeName，_findGeneratedMessagesFor）;
return new Future.value（）;
}
MessageLookupByLibrary _findGeneratedMessagesFor（locale）{
var actualLocale = Intl.verifiedLocale（locale，（x）=> _findExact（x）！
if（actualLocale == null）return null;
return _findExact（actualLocale）;
}
clickcounter.dart
import'package：polymer / polymer.dart';
import'package：intl / intl.dart';
import'dart：async';
import'messages_all.dart';
import'messages_en.dart'as en;
/ **
* A Polymer click计数器元素。
* /
@CustomTag（'click-counter'）
class ClickCounter extends PolymerElement {
@published int count = 0;
@observable var messagesLoaded = false;
ClickCounter.created（）：super.created（）{
var enMessagesFuture = initializeMessages（'en'）;
Future.wait（[enMessagesFuture]）。then（（_）=> messagesLoaded = true）;
}
void increment（）{
count ++;
}
}
html
< polymer-element name = click-counterattributes =count>
< template>
< style>
div {
font-size：24pt;
text-align：center;
margin-top：140px;
}
button {
font-size：24pt;
margin-bottom：20px;
}
< / style>
< div>
< button on-click ={{increment}}>点击我< / button>< br>
< span>（点击数：{{count}}）< / span>
< br>
< br>
< span> current locale：{{Intl.getCurrentLocale（）}}< / span>
< br>
< br>
< template if ={{messagesLoaded}}>
< span> intl message：{{如何在这里提取myMsg？}}< / span>
< / template>
< / div>
< / template>
< script type =application / dartsrc =clickcounter.dart>< / script>
< / polymer-element>
解决方案
我写了一个例子， at
https://github.com/ dart-lang / sample-polymer-intl / blob / master / README.md
或请参阅 https://www.dartlang.org/samples/ 在聚合物和国际化下
基本位如下所示
如果
// [selectedLocale]的值改变，Polymer应该自动调用这个方法。
void selectedLocaleChanged（）{
//我们没有提供en_US翻译。我们期望它在en_US的消息中使用默认的
//文本。但是，我们不必尝试和
//初始化en_US语言环境的消息。 dartbug.com/15444
if（selectedLocale =='en_US'）{
updateLocale（'en_US'）;
return;
}
//对于正常情况，我们初始化消息，等待初始化
//完成，然后更新所有（所有1）我们的消息。
initializeMessages（selectedLocale）.then（
（succeeded）=> updateLocale（selectedLocale））;
}
//当用户选择一个新的语言环境时，为
//整个程序设置默认语言环境并更新我们的消息。在一个大程序中，这个
//可以成为一个大的方法。另外，其他组件可能想要
//观察默认语言环境并相应地更新。
void updateLocale（localeName）{
Intl.defaultLocale = selectedLocale;
helloWorld = helloFromDart（）;
}
I am using Dart to build a Polymer app. Since I am using Dart's internationalization capabilities within Polymer elements, I want to initialize internationalization messages before a Polymer element is created and display the appropriate messages for a given locale within the Polymer element.
How can this be done? Has anyone successfully used Polymer with Internationalization?
ps. I have followed this example to set up internationalization
The following is the default generated Polymer app by Dart Editor plus the code that I've added.
messages_en.dart
library messages_en;
import 'package:intl/intl.dart';
import 'package:intl/message_lookup_by_library.dart';
final messages = new MessageLookup();
class MessageLookup extends MessageLookupByLibrary {
get localeName => 'en';
final messages = {
"myMsg" : () => Intl.message("MY MESSAGE")
};
}
messages_all.dart
library messages_all;
import'dart:async';
import 'package:intl/message_lookup_by_library.dart';
import 'package:intl/src/intl_helpers.dart';
import 'package:intl/intl.dart';
import 'messages_en.dart' as en;
MessageLookupByLibrary _findExact(localeName) {
switch (localeName) {
case 'en': return en.messages;
default: return null;
}
}
initializeMessages(localeName) {
initializeInternalMessageLookup(() => new CompositeMessageLookup());
messageLookup.addLocale(localeName, _findGeneratedMessagesFor);
return new Future.value();
}
MessageLookupByLibrary _findGeneratedMessagesFor(locale) {
var actualLocale = Intl.verifiedLocale(locale, (x) => _findExact(x) != null);
if (actualLocale == null) return null;
return _findExact(actualLocale);
}
clickcounter.dart
import 'package:polymer/polymer.dart';
import 'package:intl/intl.dart';
import 'dart:async';
import 'messages_all.dart';
import 'messages_en.dart' as en;
/**
* A Polymer click counter element.
*/
@CustomTag('click-counter')
class ClickCounter extends PolymerElement {
@published int count = 0;
@observable var messagesLoaded = false;
ClickCounter.created() : super.created() {
var enMessagesFuture = initializeMessages('en');
Future.wait([enMessagesFuture]).then((_) => messagesLoaded = true);
}
void increment() {
count++;
}
}
clickcounter.html
<polymer-element name="click-counter" attributes="count">
<template>
<style>
div {
font-size: 24pt;
text-align: center;
margin-top: 140px;
}
button {
font-size: 24pt;
margin-bottom: 20px;
}
</style>
<div>
<button on-click="{{increment}}">Click me</button><br>
<span>(click count: {{count}})</span>
<br>
<br>
<span>current locale: {{Intl.getCurrentLocale()}}</span>
<br>
<br>
<template if="{{messagesLoaded}}">
<span>intl message: {{How can I extract myMsg here?}}</span>
</template>
</div>
</template>
<script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>
解决方案
I wrote a sample for this, which you can find at https://github.com/dart-lang/sample-polymer-intl/blob/master/README.md or see https://www.dartlang.org/samples/ under "Polymer and Internationalization"
The essential bit looks like this
// Polymer should call this method automatically if the value of
// [selectedLocale] changes.
void selectedLocaleChanged() {
// We didn't provide en_US translations. We expect it to use the default
// text in the messages for en_US. But then we have to not try and
// initialize messages for the en_US locale. dartbug.com/15444
if (selectedLocale == 'en_US') {
updateLocale('en_US');
return;
}
// For the normal case we initialize the messages, wait for initialization
// to complete, then update all (all 1 of) our messages.
initializeMessages(selectedLocale).then(
(succeeded) => updateLocale(selectedLocale));
}
// When the user chooses a new locale, set the default locale for the
// whole program to that and update our messages. In a large program this
// could get to be a large method. Also, other components might want to
// observe the default locale and update accordingly.
void updateLocale(localeName) {
Intl.defaultLocale = selectedLocale;
helloWorld = helloFromDart();
}
这篇关于如何在聚合元素加载页面之前初始化聚合元素的国际化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
