Angular ngx-translate如何基于谓词实现单key动态翻译

原生ngx-translate默认不支持你这种在翻译JSON里直接写JS三元表达式、自动执行判断返回结果的用法。
ngx-translate默认的插值逻辑只做简单的字符串占位替换，不会把翻译内容里的JS表达式当代码执行。你当前写的"{{predicate}} ? 'translation1' : 'translation2'"配置，最终只会把{{predicate}}替换成传入的布尔值，原样输出true ? 'translation1' : 'translation2'这类字符串，不会得到你预期的判断结果。

另外你贴的实现代码还有两个明显问题：

• 异步时序错误：translate.get()是异步方法，你在subscribe回调外直接return this.result，首次调用时赋值还没完成，会返回undefined，页面渲染会出现空值。
• 不要尝试用eval之类的方法强行执行翻译字符串里的JS逻辑，会带来严重的XSS安全漏洞，生产环境绝对禁止这么做。

不拆分翻译key的可行实现方案 #

方案1：使用支持选择逻辑的翻译编译器（推荐） #

搭配@ngx-translate/message-format-compiler，用标准ICU选择语法写翻译规则，无需拆分key，原生支持参数匹配判断，且没有任意代码执行的安全风险。

1. 翻译JSON改为ICU语法格式：

"some_text": "{predicate, select, true {translation1} false {translation2}}"

2. 项目中完成编译器配置后，原有传参逻辑几乎不需要改动，传入{predicate: true}就会自动返回translation1，传入false则返回translation2。

方案2：组件侧提前计算展示文本（实现成本最低） #

把判断逻辑放在组件代码里完成，翻译文件只保留纯占位符，不需要引入额外依赖：

1. 翻译JSON简化为纯占位符配置：

"some_text": "{{displayText}}"

2. 组件调用翻译方法时，提前根据谓词判断好要展示的文本，作为插值参数传入即可：

dynamicData(predicate: boolean) {
  const displayText = predicate ? 'translation1' : 'translation2';
  this.translate.get('some_text', { displayText }).subscribe(res => {
    this.result = res;
  });
  // 注意异步问题，模板侧建议配合async管道使用，不要直接同步返回异步赋值的变量
}

对应的模板如果用async管道会更稳妥，不用手动管理订阅：

<span [innerHTML]="translate.get('some_text', {displayText: true}) | async"></span>

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