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

Question

我正在尝试构建逻辑以仅使用 i18n 库翻译页面（模块）的一部分。

我已将 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 并覆盖绑定和解除绑定方法，您可以在其中定义翻译更新应该发生的条件。

--- 用例子更新---

好的，这是我正在考虑的一个小例子，可能不是最好的方法，但它应该做到。

在您的 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 页面的一部分

how to translate only part of html page with i18n

aurelia