根据条件 Aurelia 在 HTML 按钮上显示 i18n 文本答案

【问题标题】：Displaying i18n text on HTML-button depending on condition Aurelia根据条件 Aurelia 在 HTML 按钮上显示 i18n 文本
【发布时间】：2017-04-12 22:30:29
【问题描述】：

您好，我正在尝试根据布尔值动态更改文本。我将 Aurelia 与 i18n 一起使用，一种解决方案是只使用一种返回所需内容的方法。但我想将它放在 html 中，因为我认为根据 html 代码中的布尔值，可以更清楚地看到按钮将具有哪些文本。这是现在的样子：

<button>${account.changed ? '_cancel' | t : '_close' | t } </button>

这是我尝试过的：

<button>${account.changed ? ('_cancel' | t) : ('_close' | t) } </button>
<button>${account.changed ? ${'_cancel' | t} : ${'_close' | t} } </button>

我的任何尝试都以崩溃结束：

Error: Parser Error: Conditional expression account.changed ? '_cancel'  requires all 3 expressions at column 33 in [account.changed ? '_cancel' | t : '_close' | t ]

到目前为止，我只使用过这样的 i18N：

<div>${'example | t'}</div>

以前不需要根据条件更改文本。

对于任何来到这里的人，我解决了这个问题：

innerHTML.bind="!account.changed ? close  : cancel"

在.js中

   this.close = this.i18n.tr('_close');
   this.cancel = this.i18n.tr('_cancel');

我确实认为应该可以通过 aurelia 以某种方式直接在 HTML 中实现这一目标

【问题讨论】：

标签： html aurelia

【解决方案1】：

这是我正在使用的：

<span t="_cancel" if.bind="account.changed"></span><span t="_close" if.bind="!account.changed"></span>

我被困了一段时间，这是我发现的最好的方法。

【讨论】：

【解决方案2】：

很遗憾，解析器目前不支持嵌套表达式。同时，您可以使用一些技巧，例如：

<button ref="myButton" cancel-text="${'_cancel' | t}" close-text="${'_close' | t}">${account.changed ? myButton.cancelText : myButton.closeText}</button>

【讨论】：

【解决方案3】：

如果您查看 ValueConverters 在 Aurelia 中的工作方式，您会发现它们利用了管道符号。这正如您对经典 unix 样式管道所期望的那样工作，其中左表达式输出被转发到管道之后的下一个事物。

所以你的解决方案应该是这样的：

<button>${account.changed ? '_cancel' : '_close' | t }</button>

首先使用简写 if 语法确定正确的字符串，然后将结果传递给 TValueConverter。

【讨论】：