在 Aurelia 中刷新 i18n 翻译的字符串插值

Question

如果我，例如。在我的 header 中使用 select 下拉输入字段（更准确地说是在我的全站范围 nav-bar 中，这是自定义元素），并将该值全局设置为共享状态 object .如果我 - 在 languageChanged(value) 上（在 nav-bar 自定义元素内）也更改 this.i18n.setLocale('de-DE')

然后我将如何在我的模板中刷新 i18n 翻译的字符串插值（例如 ${'status_deceased' | t}），而不必像现在这样导航到新路由并返回？

我在 github 上发现了这个关于问题 https://github.com/aurelia/i18n/issues/6 的问题，但由于我需要它来工作，我希望存在一些聪明的解决方法，除了必须使用 window.location 重新加载页面：/

编辑

如果我理解正确的话，这似乎是我的幸运日，8 天前刚刚添加了这样的功能，尽管仍未记录：https://github.com/aurelia/templating-resources/pull/126 - 谁能想出并告诉我我如何实现这个，也许使用这个新功能？如果我自己解决了这个问题，我会用解决方案更新这个线程:-)

Answer 1

下一个版本发布时，您将能够使用 signal 绑定行为将 "signal name" 分配给绑定，如下所示：

<h1>${'title_key' | t & signal:'i18n'}</h1>
<p>${'content_key' | t & signal:'i18n'}</p>

& 符号表示 "Binding Behavior"（与值转换器的 | 相对）。绑定行为是将 "behavior" 添加到绑定的资源。他们对绑定实例具有完全访问权限，并在绑定的 bind 和 unbind 生命周期事件之前收到通知。

Aurelia 将附带几个内置绑定行为："throttle"、"debounce"、"one-time"、"signal" 等。您还可以选择创建自己的绑定行为绑定行为。

在上面的示例中，我们为 title 和 content 插值绑定指定了 "signal" 名称 "i18n"。名称是任意的，我们只需要知道它是什么，这样我们就可以 "signal" 使用 BindingSignaler 刷新绑定，如下所示：

import {BindingSignaler} from 'aurelia-templating-resources';
import {inject} from 'aurelia-framework';

@inject(BindingSignaler)
export class App {
  constructor(signaler) {
    this.signaler = signaler;
  }

  // invoking this method will refresh all bindings in the application
  // with the "signal name" of "i18n"
  refreshBindings() {
    this.signaler.signal('i18n');
  }
}

我想一旦绑定行为功能下降，i18n 插件中将进行额外的工作，将 t 值转换器与某些版本的 signal 绑定行为相结合，以启用简洁的绑定表达式当语言发生变化时，请注意翻译和刷新绑定，因此您可能想暂时坐稳。

编辑如果您今天需要一些东西，您可以利用现有的 Aurelia 功能：当转换器参数更改时重新评估绑定。

新建 class:

export class LanguageChangedNotifier {
  signal = 0;

  notify() {
    this.signal++;
  }
}

将此 class 注入所有视图模型并将实例添加为属性:

@inject(LanguageChangedNotifier)
export class App {
  constructor(notifier) {
    this.notifier = notifier;
  }
}

在您的 t 绑定中使用通知程序（它不会影响 t 值转换器的行为）：

${'status_deceased' | t:notifier.signal}

更改语言环境时，使用通知程序刷新绑定：

this.notifier.notify();

在 Aurelia 中刷新 i18n 翻译的字符串插值

Refreshing i18n translated string interpolated values in Aurelia

javascript

aurelia