如何在三元运算符中使用ngx-translate实现文本翻译？

你之前尝试在属性绑定的三元表达式里直接用'Status' | translate的写法无效，是因为属性绑定[]内的表达式是TypeScript语法，不能直接使用模板管道的字符串写法，管道语法只适用于插值表达式{{ }}中。下面是两种可行的实现方式：

方式一：通过组件类方法获取翻译文本 #

1. 在组件类中注入TranslateService，并定义一个返回翻译文本的方法：

import { TranslateService } from '@ngx-translate/core';

// 组件类
constructor(private translate: TranslateService) {}

getTooltipText(): string {
  // 根据editMode状态返回对应翻译文本
  return this.editMode ? this.translate.instant('Status') : this.translate.instant('Change');
}

2. 模板中调用该方法：

<ion-badge [tooltip]="getTooltipText()">{{ status }}</ion-badge>

方式二：直接在模板中使用TranslateService的方法 #

如果已经在组件类中将TranslateService声明为public（方便模板访问），可以直接在属性绑定表达式中调用instant方法：

// 组件类中修改注入声明为public
constructor(public translate: TranslateService) {}

模板代码：

<ion-badge [tooltip]="editMode ? translate.instant('Status') : translate.instant('Change')">{{ status }}</ion-badge>

处理异步翻译场景 #

如果你的翻译文件是异步加载的，instant可能会直接返回键名（因为翻译还未加载完成），此时可以使用get方法结合async管道：

<ion-badge [tooltip]="(editMode ? translate.get('Status') : translate.get('Change')) | async">{{ status }}</ion-badge>

translate.get()返回Observable，async管道会自动订阅并获取最终的翻译文本，避免初始显示键名。

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