Question

我试图构建逻辑，只用i18n lib翻译页面（模块）的一部分。

我在全局设置i18n以更改语言时更改语言，但我希望在该页面上有一个模块（就像电子邮件的某种预览一样），我可以通过一些模块在该模块上更改下拉字段。像某种范围的i18n。

我正在使用aurelia-i18n 1.4.0版本。

是否可以设置<span t="messages.hello_message">hello<span>来监视语言的本地模块更改而不是全局模块更改，但是再次使用与全局相同的翻译文件。

有没有人有类似的问题或想法我该怎么做？谢谢。：）

Answer 1

你无法开箱即用。使用setLocale更改活动区域设置时，该方法将触发事件并发出绑定行为https://github.com/aurelia/i18n/blob/master/src/i18n.js#L54的更新信号。 TCustomAttribute侦听这些更改并自动重新绑定绑定。你可以做的是创建你自己的自定义属性，如https://github.com/aurelia/i18n/blob/master/src/t.js所示，并覆盖bind和unbind方法，你可以在更新翻译时定义条件。

---更新示例---

好的，所以这里有一个小例子我想到的，可能不是最好的方式，但应该这样做。

在你的main.js中添加一个新的globalResources

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .plugin('aurelia-i18n', (instance) => {
      ...
    })
    .globalResources("./foo-custom-attribute") // <-- this here

现在创建一个文件foo-custom-attribute.js

import {TCustomAttribute} from 'aurelia-i18n';
import {customAttribute} from 'aurelia-framework';

@customAttribute('foo')
export class FooCustomAttribute extends TCustomAttribute {
  constructor(element, i18n, ea, tparams) {
    super(element, i18n, ea, tparams);
  }

  bind() {
    this.params = this.lazyParams();

    if (this.params) {
      this.params.valueChanged = (newParams, oldParams) => {
        this.paramsChanged(this.value, newParams, oldParams);
      };
    }

    let p = this.params !== null ? this.params.value : undefined;
    this.service.updateValue(this.element, this.value, p);
  }

  unbind() {}
}

这实际上创建了一个名为foo的新属性，它扩展了TCustomAttribute并覆盖了bind / unbind方法，以排除信号并听取语言更改事件。

在您看来，您现在可以使用

<span t="demo"></span>
<span foo="demo"></span>

现在切换语言会像往常一样更改t属性，但会保持foo不变。

如何用i18n只翻译部分html页面

1 个答案: