Ionic/Angular布尔判断字符串翻译实现求助

你遇到的问题核心在于没有正确拆分翻译逻辑，且管道的作用范围不对，Angular的translate管道无法直接处理动态表达式作为键，也不能让管道只作用在三元表达式的某一部分却期望整体生效。下面是具体的解决步骤：

1. 先在语言文件中定义独立的翻译键 #

不要把整个表达式作为翻译键，而是为每个状态单独设置键值对。比如：

英语语言文件（en.json）：

{
  "order.status.shipped": "Shipped",
  "order.status.not-shipped": "No Shipped"
}

德语语言文件（de.json）：

{
  "order.status.shipped": "geschlossen",
  "order.status.not-shipped": "offen"
}

2. 在模板中正确应用translate管道 #

因为管道的优先级高于三元运算符，所以必须用括号把每个带管道的分支包裹起来，确保翻译逻辑先执行，再做布尔判断：

{{ order.shipped ? ('order.status.shipped' | translate) : ('order.status.not-shipped' | translate) }}

另一种更清晰的写法（用*ngIf指令） #

如果觉得三元表达式有点拥挤，也可以用*ngIf配合translate指令实现，可读性更强：

<span *ngIf="order.shipped" translate>order.status.shipped</span>
<span *ngIf="!order.shipped" translate>order.status.not-shipped</span>

为什么你之前的方法无效？ #

• 你的第一种写法{{order.shipped?'Shipped':'No Shipped' | translate}}：管道只作用在'No Shipped'上，Shipped不会被翻译，而且如果语言文件里没有No Shipped这个键，翻译也不生效。
• 把整个三元表达式作为翻译键：翻译服务只会匹配静态字符串键，不会解析动态表达式，自然找不到对应的翻译项。
• 嵌套{{}}的写法：Angular模板不允许在插值表达式里嵌套另一个插值，这种写法本身就不符合语法规范，会直接报错。

内容的提问来源于stack exchange，提问作者Lorenzo Varano