Angular 翻译三元运算符中的过滤器

Question

我正在尝试将我的项目翻译成另一种语言。我使用了 angular 翻译库并提供了一个带有翻译的外部 JSON 文件。它看起来像这样：

{
  "hello_world": "Hola Mundo"
}

当我将它与简单的硬编码字符串一起使用时，它工作得很好并且我得到了正确的翻译：

<p>{{ "hello_world" | translate }}</p>

但是如何在这样的代码中处理三元运算符？

<button> {{ conditionValue ? 'Show' : 'Hide' }} </button>

如何将 'Show' 和 'Hide' 值更改为带有 Angular 翻译的翻译过滤器？我尝试了不同的方法，但出现了无效的语法错误。谢谢！

Answer 1

我想如果你把 ternary operator 换成 () 就可以了。

<button> {{ ( conditionValue ? 'Show' : 'Hide' ) | translate }} </button>

Answer 2

你可以试试这个：

这里我把用户名设置成在线和离线，当你选择soanish时，用户在线状态会根据三元条件变成spnish。

[https://plnkr.co/edit/o16dpI?p=preview][1]

{{ ( userName ? 'Show' : 'Hide' ) | translate }}

Answer 3

我刚刚想出了解决办法！对于三元运算符，我们必须使用 'translate' 指令而不是过滤器。而且效果很好：

{
  "show_value": "Show",
  "hide_value": "Hide",
}

<button translate> {{ conditionValue ? "show_value" : "hide_value" }} </button>

Answer 4

如果存在前缀

{{ ('massmedias.' + (ctrl.actionType === 'add' ? 'add' : 'rename')) | translate }}

Answer 5

这是您的语言 JSON 文件

"CONFIGURATION": {
    "NEW_TEMPLATE": "New Template",
    "EDIT_TEMPLATE": "Edit Template"
}

CASE-I（带有 HTML 标签）

<button> {{ ( variable === '5' ? 'CONFIGURATION.NEW_TEMPLATE' : 'CONFIGURATION.EDIT_TEMPLATE' ) | translate }} </button>

CASE-II（带有一些第三方属性）

<p-dialog header="{{(variable === '5' ? 'CONFIGURATION.NEW_TEMPLATE' : 'CONFIGURATION.EDIT_TEMPLATE') | translate}}">

Angular translate filter in ternary operator