如何使用 i18n 仅翻译部分 html 页面答案

【问题标题】：how to translate only part of html page with i18n如何使用 i18n 仅翻译部分 html 页面
【发布时间】：2017-08-15 18:06:01
【问题描述】：

我试图构建逻辑以使用 i18n lib 仅翻译部分页面（模块）。

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

我使用的是 aurelia-i18n 1.4.0 版本。

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

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

【问题讨论】：

标签： aurelia

【解决方案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 并覆盖了绑定/取消绑定方法以排除信令和侦听语言更改事件。

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

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

现在切换语言将照常更改t 属性，但将保持foo 不变。

【讨论】：