根据聚合物文档应用程序本地化行为 https://www.polymer-project.org/1.0/toolbox/localize
每个显示要本地化内容的元素都应添加 Polymer.AppLocalizeBehavior。所有这些元素共享一个共同的本地化缓存，所以你只需要加载翻译一次.
在下面的代码片段中（改编自这个答案 https://stackoverflow.com/questions/37332126/app-localize-behavior-and-nested-template/37332899#37332899) 中没有找到共享资源 tag
也许我错过了什么？
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<script src="https://rawgit.com/yahoo/intl-messageformat/d361003/dist/intl-messageformat.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="app-localize-behavior/app-localize-behavior.html">
</head>
<body>
<x-local-translate></x-local-translate>
<dom-module id="x-local-translate">
<template>
<div>
<span title="english">????????</span>
<paper-toggle-button on-change="_toggle" id="switch"></paper-toggle-button>
<span title="french">????????</span>
</div>
<div>
<h4>Outside Repeater</h4>
<div>
<div>{{localize('greeting')}}</div>
</div>
<h4>Template Repeater Items</h4>
<template is="dom-repeat" items="{{things}}">
<div>{{localize('greeting')}}</div>
</template>
<x-local-test></x-local-test>
</div>
</template>
<script>
Polymer({
is: "x-local-translate",
behaviors: [
Polymer.AppLocalizeBehavior
],
properties: {
things: {
type: Array,
value: function() {
return [1, 2, 3];
}
},
/* Overriden from AppLocalizeBehavior */
language: {
value: 'en',
type: String
},
/* Overriden from AppLocalizeBehavior */
resources: {
type: Object,
value: function() {
return {
'en': {
'greeting': 'Hello!'
},
'fr': {
'greeting': 'Bonjour!'
}
};
}
}
},
_toggle: function() {
this.language = this.$.switch.checked ? 'fr' : 'en';
}
});
</script>
</dom-module>
<dom-module id="x-local-test">
<template>
<h4>Inside x-local-test</h4>
<div>{{localize('greeting')}}</div>
</template>
<script>
Polymer({
is: "x-local-test",
behaviors: [
Polymer.AppLocalizeBehavior
],
properties: {
things: {
type: Array,
value: function() {
return [1, 2, 3];
}
}
},
});
</script>
</dom-module>
</body>
</html>
现在，在下面的小提琴中，我通过传递它使其工作资源 and language对象作为 x-local-test 属性。https://jsfiddle.net/g4evcxzn/2/ https://jsfiddle.net/g4evcxzn/2/
但没有它应该可以工作
根据 Jose A. 和 Jean-Rémi 的想法，这里有一些复制/粘贴的示例代码：
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-localize-behavior/app-localize-behavior.html">
<script>
MyLocalizeBehaviorImpl = {
properties: {
language: {
value: 'de'
}
},
attached: function() {
this.loadResources(this.resolveUrl('locales.json'));
}
};
MyLocalizeBehavior = [MyLocalizeBehaviorImpl, Polymer.AppLocalizeBehavior];
</script>
将行为文件包含在所有自定义组件中并添加行为：
<link rel="import" href="./my-localize-behavior.html">
......
behaviors: [
MyLocalizeBehavior
],
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
